当前位置 > it书童 > 大前端 > 正文

vue 操作表单元素

大前端 it书童 2020-02-10 21:59:28 0赞 0踩 65阅读 0评论

radio

  • 多个单选框需要同时通过 v-model 双向绑定同一个值

  • 每一个单选框必须要有 value 属性 且 value 值不能一样

  • 当某一个单选框选中的时候, v-model 会将当前的 value 值同步到 data 中的数据

<div class="container mt-5" id="app">
    <div class="form-check">
        <label class="form-check-label">
            <input type="radio" value=1 v-model="gender" class="form-check-input" name="optradio">男
        </label>
        </div>
        <div class="form-check">
        <label class="form-check-label">
            <input type="radio" value=2 v-model="gender" class="form-check-input" name="optradio">女
        </label>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            gender: 2
        }
    })
</script>

checkbox

由于 checkbox 是复选,故而其关联的数据是一个数组,此外与 radio 一致

<div class="container mt-5" id="app">
    <div class="form-check">
        <label class="form-check-label">
            <input type="checkbox" class="form-check-input" value="1" v-model="skill">降龙十八掌
        </label>
        </div>
        <div class="form-check">
        <label class="form-check-label">
            <input type="checkbox" class="form-check-input" value="2" v-model="skill">九阴真经
        </label>
        </div>
        <div class="form-check">
        <label class="form-check-label">
            <input type="checkbox" class="form-check-input" value="3" v-model="skill">蒙古摔跤
        </label>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            skill: [1, 3]
        }
    })
</script>

select

<div class="container mt-5" id="app">
    <div class="form-group">
        <label for="sel1">Select list:</label>
        <select class="form-control" id="sel1" v-model="cast">
            <option value="0">请回答1988</option>
            <option value="1">成宝拉</option>
            <option value="2">成德善</option>
            <option value="3">狗正焕</option>
        </select>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            cast: 2
        }
    })
</script>

textarea

<div class="container mt-5" id="app">
    <div class="form-group">
        <label for="comment">名言:</label>
        <textarea class="form-control" rows="5" id="comment" v-model="comment"></textarea>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            comment: '明月几时有,把酒问青天'
        }
    })
</script>

表单修饰符

.number

转换为数值

<input v-model.number="age" type="number">

.trim

自动过滤用户输入的首尾空白字符,只能去掉首尾的,不能去除中间的空格

<input v-model.trim="msg">

.lazy

将input事件切换成change事件

.lazy 修饰符延迟了同步更新属性值的时机。将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上,在失去焦点或者按下回车键时才更新

<input v-model.lazy="msg">
转载须注明出处:https://www.itshutong.com/articles/430/vue-operation-form-element
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录