Vue.js每天必学之表单控件绑定
基础用法
可以用v-model指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,v-model不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。
Text
<span>Messageis:{{message}}</span> <br> <inputtype="text"v-model="message"placeholder="editme">
Checkbox
单个勾选框,逻辑值:
<inputtype="checkbox"id="checkbox"v-model="checked"> <labelfor="checkbox">{{checked}}</label>
多个勾选框,绑定到同一个数组:
<inputtype="checkbox"id="jack"value="Jack"v-model="checkedNames"> <labelfor="jack">Jack</label> <inputtype="checkbox"id="john"value="John"v-model="checkedNames"> <labelfor="john">John</label> <inputtype="checkbox"id="mike"value="Mike"v-model="checkedNames"> <labelfor="mike">Mike</label> <br> <span>Checkednames:{{checkedNames|json}}</span>
newVue({ el:'...', data:{ checkedNames:[] } })
Radio
<inputtype="radio"id="one"value="One"v-model="picked"> <labelfor="one">One</label> <br> <inputtype="radio"id="two"value="Two"v-model="picked"> <labelfor="two">Two</label> <br> <span>Picked:{{picked}}</span>
Select
单选:
<selectv-model="selected"> <optionselected>A</option> <option>B</option> <option>C</option> </select> <span>Selected:{{selected}}</span>
多选(绑定到一个数组):
<selectv-model="selected"multiple> <optionselected>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected:{{selected|json}}</span>
动态选项,用v-for渲染:
<selectv-model="selected"> <optionv-for="optioninoptions"v-bind:value="option.value"> {{option.text}} </option> </select> <span>Selected:{{selected}}</span>
newVue({ el:'...', data:{ selected:'A', options:[ {text:'One',value:'A'}, {text:'Two',value:'B'}, {text:'Three',value:'C'} ] } })
绑定value
对于单选按钮,勾选框及选择框选项,v-model绑定的value通常是静态字符串(对于勾选框是逻辑值):
<!--当选中时,`picked`为字符串"a"--> <inputtype="radio"v-model="picked"value="a"> <!--`toggle`为true或false--> <inputtype="checkbox"v-model="toggle"> <!--当选中时,`selected`为字符串"abc"--> <selectv-model="selected"> <optionvalue="abc">ABC</option> </select>
但是有时我们想绑定value到Vue实例的一个动态属性上,这时可以用v-bind实现,并且这个属性的值可以不是字符串。
Checkbox
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"> //当选中时 vm.toggle===vm.a //当没有选中时 vm.toggle===vm.b
Radio
<inputtype="radio"v-model="pick"v-bind:value="a"> //当选中时 vm.pick===vm.a
SelectOptions
<selectv-model="selected"> <!--对象字面量--> <optionv-bind:value="{number:123}">123</option> </select> //当选中时 typeofvm.selected//->'object' vm.selected.number//->123
参数特性
lazy
在默认情况下,v-model在input事件中同步输入框值与数据,可以添加一个特性lazy,从而改到在change事件中同步:
<!--在"change"而不是"input"事件中更新-->
<inputv-model="msg"lazy>
number
如果想自动将用户的输入转为Number类型(如果原值的转换结果为NaN则返回原值),可以添加一个特性number:
<inputv-model="age"number>
debounce
debounce设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中Ajax请求),它较为有用。
<inputv-model="msg"debounce="500">
注意debounce参数不会延迟input事件:它延迟“写入”底层数据。因此在使用debounce时应当用vm.$watch()响应数据的变化。若想延迟DOM事件,应当使用debounce过滤器。
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。