VUE实现表单元素双向绑定（总结）
本⽂介绍了VUE实现表单元素双向绑定（总结），分享给⼤家，具体如下：
checkbox最基本⽤法:
<input type="checkbox" v-model="inputdata" checked/>
<input type="checkbox" v-model="inputdata"/>
<input type="checkbox" v-model="inputdata"/>
new Vue({
el:".......",
data:{
inputdata:false //逻辑类型
}
ready:function(){
console.log(this.inputdata)//true
}
})
规则1：如果v-model绑定的变量类型为boolean，若input被选中，this.inputdata为true，否则this.inputdata为false。
inputdata变量初始设置为false，但是在页⾯进⾏编译时，因为第⼀个input为选中状态，所以更新inputdata为true，那么渲染结束之后三个input均为选中状态，且三个input状态同步。
<input type="checkbox" value="a" v-model="inputdata" checked/>
<input type="checkbox" value="b" v-model="inputdata"/>
<input type="checkbox" value="c" v-model=""inputdata" checked/>
new Vue({
el:".......",
data:{
inputdata:[]//数组类型
}
ready:function(){
console.log(this.inputdata)//[a,c]
}
})
规则2：如果v-model绑定的变量类型为数组，那么绑定该变量的元素若被选中，把该元素的value值添加进数组，若不被选中，那么把该元素的value从数组中去除。
所以在v-model绑定的变量类型是数组的情况下，务必设置绑定该变量的每个元素的value值，且value值不要相等。见上例。
radio基本⽤法
<input type="radio" value="a" v-model="inputdata" />
<input type="radio" value="b" v-model="inputdata" checked/>
<input type="radio" value="c" v-model="inputdata" checked/>
new Vue({
el:".......",
data:{
inputdata:"a"
}
ready:function(){
console.log(this.inputdata)// c
}
})
规则：v-model绑定的变量值如果等于input元素其中⼀个value值，那么该表单元素会被选中，如果不等于任何input的value 值，所有相关元素不选中。同时如果选中某个input元素，那么该元素的value值就会被赋给该变量，页⾯重新渲染。
如上，初始this.inputdata为"a"，在编译到第⼆个input时，因为属性为checked表⽰选中，该元素value为"b"，所以
this.inputdata值为"b"，然后编译到第三个input时，同样存在checked，所以this.inputdata为"c"。编译结束后，this.inputdata值为"c"，页⾯最终渲染效果为第三个被选中，前两个未被选中。
select基本⽤法
<select v-model="selected">
<option>A</option>
<option selected>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>
new Vue({
el:"....",
data:{
selelcted:"A"
}
})
vue json字符串转数组规则：v-model绑定的变量值如果等于option元素其中⼀个value值，那么该元素会被选中。同时如果选中某个option元素，那么该元素的value值就会被赋给该变量。
如上，初始this.selected为"A"，在编译到第⼆个option时，因为属性为selected表⽰选中，该元素text值为"B"（如果option有value值，会优先value值），所以this.selected值为"B"。编译结束后，this.slected值为"B"，页⾯最终渲染效果为第⼆个被选中。如果是可多选select下拉框，规则基本同checkbox的规则2
属性基本⽤法
lazy
在默认情况下，v-model 在input 事件中同步输⼊框值与数据，可以添加⼀个特性lazy，input值发⽣改变时，不会同步到绑定的变量
<input type="text" v-model="msg" lazy>//input值发⽣改变，msg不变
number
如果想⾃动将⽤户的输⼊转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加⼀个特性 number：
复制代码代码如下:
<input v-model="age" number>//默认输⼊框内的值为字符串，添加number，可以将输⼊值转换为数字在同步到age debounce
设置⼀个最⼩的延时，在每次敲击之后延时同步输⼊框的值与数据。如果每次更新都要进⾏⾼耗操作（例如在输⼊提⽰中Ajax 请求），它较为有⽤.
<input v-model="msg" debounce="500">//输⼊内容0.5秒后同步到msg
vm.$watch({
'msg':function(val,oldval){
}
})
注意 debounce 参数不会延迟 input 事件：它延迟“写⼊”底层数据(所以不适合ajax请求事件)。因此在使⽤debounce 时应当⽤vm.$watch() 响应数据的变化。
若想延迟 DOM 事件，应当使⽤debounce过滤器。
debounce过滤器
复制代码代码如下:
<input @keyup="onKeyup | debounce 500">//只要操作键盘间隔⼩于0.5秒，就不会发⽣onKeyup事件。
包装处理器，让它延迟执⾏ x ms，默认延迟 300ms。包装后的处理器在调⽤之后⾄少将延迟 x ms，如果在延迟结束前再次调⽤，延迟时长重置为 x ms。
⽤此过滤器⾮常适合做ajax请求
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论