Vue.js笔记-表单控件绑定
基础语法
可以用v-model指令在表单控件元素上创建双向数据绑定，根据控件类型它自动选取正确的方法更新元素。
text
Message is: {{ message }}span><input type="text" v-model="message" placeholder="edit me">
Multiline text
{{ message }}p><textarea v-model="message" placeholder="add multiple lines">textarea>
checkbox
单个勾选框，逻辑值：
<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}label>//显示勾选状态，false或true
多个勾选框，绑定到同一个数组：
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jacklabel><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">Johnlabel><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mikelabel>Checked names: {{ checkedNames | json }}span>new Vue({el: '...',data: {checkedNames: []}})
radio
<input type="radio" id="one" value="One" v-model="picked"><label for="one">Onelabel><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Twolabel>Picked: {{ picked }}span>var vm = new Vue({el : "#app",data:{- picked:''
- }
})
select
单选：
<select v-model="selected"><option selected>Aoption>Boption>Coption>select>Selected: {{ selected }}span>
多选（绑定到一个数组）：
<select v-model="selected" multiple><option selected>Aoption>Boption>Coption>select>Selected: {{ selected | json }}span>
动态选项（用v-for渲染）：
<select v-model="selected"><option v-for="option in options" v-bind:value="option.value">{{ option.text }}option>select>Selected: {{ selected }}span>new Vue({el: '...',data: {selected: 'A',options: [{ text: 'One', value: 'A' },{ text: 'Two', value: 'B' },{ text: 'Three', value: 'C' }]}})
绑定value
对于单选按钮，勾选框及选择框选项，v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：
<input type="radio" v-model="picked" value="a"><input type="checkbox" v-model="toggle"><select v-model="selected"><option value="abc">ABCoption>select>
但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
checkbox
<inputtype="checkbox"v-model="toggle"v-bind:true-value="a"v-bind:false-value="b">// 当选中时vm.toggle === vm.a// 当没有选中时vm.toggle === vm.b
radio
<input type="radio" v-model="pick" v-bind:value="a">// 当选中时vm.pick === vm.a
select options
<select v-model="selected"><option v-bind:value="{ number: 123 }">123option>select>// 当选中时typeof vm.selected // -> 'object'vm.selected.number // -> 123
参数特性
lazy
在默认情况下，v-model 在input 事件中同步输入框值与数据，可以添加一个特性 lazy，从而改到在 change 事件中同步：
<input v-model="msg" lazy>
number
如果想自动将用户的输入转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个特性 number：
<input v-model="age" number>
debounce
debounce 设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。
<input v-model="msg" debounce="500">
注意 debounce 参数不会延迟 input 事件：它延迟“写入”底层数据。因此在使用 debounce 时应当用 vm.$watch() 响应数据的变化。若想延迟 DOM 事件，应当使用 debounce 过滤器。
案例
</span><span class="pln" style="color:rgb(72,72,76);">PlayAround2 Have Fun</span><span class="tag" style="color:rgb(0,0,136);"> checkBox{{checked}}multi checkboxChecked names: {{names | json}}RadioPicked: {{picked}}SelectCurryAaronSelected: {{selected}}Multi SelectKobeCurryAaronSelected: {{multiSelected}}Select with forSelected: {{selectedPlayer}}Lazy-改变更新的事件从input->changeMsg:{{msg}}Numberage:{{age}}debounce-延迟更新viewEdit medelayMsg:{{delayMsg}}