vue.js实战学习——表单与v-model（二）

注：此内容摘抄自：梁灏的《Vue.js实战》

注：记得要引入vue.js才能运行哦，文章中贴出的代码直接复制是不行的，html css js 都放在了一起，而且也没有引用vue.js。

1.绑定值

在业务中，有时需要绑定一个动态的数据，这时可以用v-bind来实现。

单选按钮：

<div class="app1">
    <input type="radio" name="" id="" :value="value" v-model="picked" />
    <label for="">单选按钮</label>
    <p>{{picked}}</p>
    <p>{{value}}</p>
</div>

var app1=new Vue({
    el:'.app1',
    data:{
        picked:false,
        value:123
    }
});

复选框：

<div class="app2">
    <input type="checkbox" v-model="toggle" :true-value='value1' :false-value="value2" />
    <label for="">复选框</label>
    <p>{{toggle}}</p>
    <p>{{value1}}</p>
    <p>{{value2}}</p>
</div>

var app2=new Vue({
    el:'.app2',
    data:{
        toggle:false,
        value1:'a',
        value2:'b'
    }
});

选择列表：

<div class="app3">
    <select name="" v-model="selected">
        <option :value="{number:123}">123</option>
    </select>
    {{selected.number}}
</div>

var app3=new Vue({
    el:'.app3',
    data:{
        selected:''
    }
});

2.修饰符

与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。

.lazy：

在输入框中，v-model默认是在input事件中同步输入框的数据（除了提示中介绍的中文输入法情况外），使用修饰符 .lazy 会转变为在change事件中同步。

<div class="app4">
    <input type="text" name="" id="" value="" v-model.lazy="message"/>
    <p>{{message}}</p>
</div>

var app4=new Vue({
    el:'.app4',
    data:{
        message:''
    }
});

这时，message并不是实时改变的，而是在失焦或按回车时才更新。

.number：

使用修饰符.number可以将输入转换为Number类型，否则虽然你输入的数字，但它的类型其实是String，比如在数字输入框时会比较有用。

<div class="app5">
    <input type="text" name="" id="" value="" v-model.number="message"/>
    <p>{{typeof message}}</p>
</div>

var app5=new Vue({
    el:'.app5',
    data:{
        message:'123'
    }        
});

.trim：

修饰符 .trim可以自动过滤输入的首尾空格。

<div class="app6">
    <input type="text" name="" id="" value="" v-model.trim="message"/>
    <p>{{message}}</p>
</div>

var app6=new Vue({
    el:'.app6',
    data:{
        message:''
    }
});

从Vue.js 2.x 开始，v-model还可以用于自定义组件，满足定制化的需求。