Vue-表单控件绑定&双向数据绑定

表单控件绑定&双向数据绑定

v-model

基本用法

多选

<div id='box'>
    <input type='checkbox' v-model='check'>
</div>

new Vue({
    el:'#box',
    data:{
        check:true
    }
})

通过v-model绑定了一个数组checkgroup，这样实现每个复选框被点击时，Vue会将该复选框的value值按顺序push到checkgroup中

<div id='box'>
    <input type="checkbox" v-model="checkgroup" value="vue"/>vue
    <input type="checkbox" v-model="checkgroup" value="react"/>react
    <input type="checkbox" v-model="checkgroup" value="jquery"/>jquery
</div>

new Vue({
    el:'#box',
    data:{
        checkgroup:[];
    }
})

单选

<div id='box'>
    <input type="radio" v-model="picked" value="vue" name="aaa"/>vue
    <input type="radio" v-model="picked" value="react"     name="aaa"/>react
    <input type="radio" v-model="picked" value="jquery" name="aaa"/>jquery
</div>

new Vue({
    el:'#box',
    data:{
        picked:""
    }
})

修饰符

.lazy

取代 input 监听 change 事件

<div id='box'>
    <input v-model.lazy='mytext'>
    <!-- 这里的mytext不会实时修改而是在input失去焦点的时候才会修改-->
    {{mytext}} 
</div>

new Vue({
    el:'#box',
    data:{
        mytext:''
    }
})

.number

输入字符串转为有效的数字

<input type="number" v-model.number="mynumber"/>
{{mynumber}}

.trim

输入首尾空格过滤

<input type="text" v-model.trim="myusername"/>
|{{myusername}}|