Vue---day06---表单输入绑定（双向绑定）

表单输入绑定

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖（这里前面写过大致是由哪两种指令）。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

        <div id="app">
            <input type="checkbox" id="checkbox" v-model="checked">
            <label for="checkbox">{{checked}}</label>

        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    checked:false
                }
            }) 
        </script>

这里用v-model绑定了复选框的checked属性，并获取根据其是否发生变化而更新到页面上。

        <div id="app">
            <input type="checkbox" id="jack" value="jack" v-model="checkedName">
            <label for="jack">Jack</label>
            <input type="checkbox" id="mercy" value="mercy" v-model="checkedName">
            <label for="mercy">Mercy</label>
            <input type="checkbox" id="tracy" value="tracy" v-model="checkedName">
            <label for="tracy">Tracy</label>
            <p>{{checkedName}}</p>

        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    checkedName:[]
                }
            })
        </script>

这里由于多个checkbox绑定了同一个checkedName，所以在实例的data里需要使用数组来储存数据。单选框因为只能被选中一个值，所以不需要，这里也就不给例子了。
同理在选择框内是一样的。
但是对于需要把数据绑定到一个动态的property上时，可以使用v-bind。

<input type="radio" v-model="pick" v-bind:value="a">此时vm.pick===vm.a（当选中时）

修饰符

在“change”时而非“input”时更新
<input v-model.lazy="msg">

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">