Vue学习笔记五

v-model

v-model在双向绑定的时候会忽视value，checked，selected特征的初始值。
v-model可以绑定的控件有textarea,checked,radio,select。其他控件不能够通过v-model双向绑定

对于多个复选框，我们可以通过绑定一个数组的形式实现

<div id="app">        <input type="checkbox" value="jack" v-model="names" >        <input type="checkbox" value="xiaoD" v-model="names" >        <input type="checkbox" value="joe" v-model="names" >        {{names}}    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                names:[                ]            }        })    </script>

多个单选框

<div id="app">        <input type="radio" value="jack" v-model="name" >        <input type="radio" value="xiaoD" v-model="name" >        <input type="radio" value="joe" v-model="name" >        {{name}}    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                name: ''            }        })    </script>

下拉框selected

<div id="app">        <select v-model="name">            <option disabled value="">请选择</option>            <option>xiaoD</option>            <option>joe</option>        </select>        {{name}}    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                name: ''            }        })    </script>

绑定到一个动态属性上

<div id="app">        <input             checked="checked"             type="checkbox"             v-model="toggle"            v-bind:true-value="a"            v-bind:false-value="b"        >{{toggle}}    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                toggle:"a",                a:"aa",                b:"bb"            }        })    </script>

修饰符

.lazy

默认情况下，我们一直是在同步输入框的值和我们data数据，但是我们可以添加一个.lazy。转换在在change事件中同步

<div id="app">        <input @change="dos" v-model.lazy="msg" />{{msg}}    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                msg:"",            },            methods: {                dos: function(){                    alert(this.msg)                }            }        })    </script>

.number

将用户输入的值转化为Number类型

<div id="app">        <input v-model.number="age" type="number">    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                age:0,            }        })    </script>

.trim

<div id="app">        <input v-model.trim="name">{{name}}    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                name:'',            }        })    </script>