VUE实现表单元素双向绑定(总结)
前端之家 收集整理的这篇文章主要介绍了
VUE实现表单元素双向绑定(总结) ,
前端之家 小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_
502 _0@规则1:如果v-model绑定的变量类型为boolean,若input被选中,this.inputdata为true,否则this.inputdata为false。
@H_
502 _0@inputdata变量初始设置为false,但是在
页面 进行编译时,因为第一个input为选中状态,所以更新inputdata为true,那么渲染结束之后三个input均为选中状态,且三个input状态同步。
Box" value="b" v-model="inputdata"/>
new Vue({
el:".......", data:{
inputdata:[]//数组类型
}
ready:function(){
console.log(this.inputdata)//[a,c]
}
})
@H_
502 _0@规则2:如果v-model绑定的变量类型为数组,那么绑定该变量的元素若被选中,把该元素的value值
添加 进数组,若不被选中,那么把该元素的value从数组中
去除 。
@H_
502 _0@所以在v-model绑定的变量类型是数组的情况下,务必设置绑定该变量的每个元素的value值,且value值不要相等。见上例。
@H_
502 _0@
new Vue({
el:".......",data:{
inputdata:"a"
}
ready:function(){
console.log(this.inputdata)// c
}
})
@H_
502 _0@规则:v-model绑定的变量值如果等于input元素其中一个value值,那么该表单元素会被选中,如果不等于任何input的value值,所有相关元素不选中。同时如果选中某个input元素,那么该元素的value值就会被赋给该变量,
页面 重新渲染。
@H_
502 _0@如上,初始this.inputdata为"a",在编译到第二个input时,因为
属性 为checked表示选中,该元素value为"b",所以this.inputdata值为"b",然后编译到第三个input时,同样存在checked,所以this.inputdata为"c"。编译结束后,this.inputdata值为"c",
页面 最终渲染
效果 为第三个被选中,前两个未被选中。
@H_
502 _0@
select基本用法
A
B
C
Selected: {{ selected | json }}
new Vue({
el:"....", data:{
selelcted:"A"
}
})
@H_
502 _0@规则:v-model绑定的变量值如果等于option元素其中一个value值,那么该元素会被选中。同时如果选中某个option元素,那么该元素的value值就会被赋给该变量。
@H_
502 _0@如上,初始this.selected为"A",在编译到第二个option时,因为
属性 为selected表示选中,该元素text值为"B"(如果option有value值,会优先value值),所以this.selected值为"B"。编译结束后,this.slected值为"B",
页面 最终渲染
效果 为第二个被选中。如果是可多选select下拉框,规则基本同check
Box 的规则2
@H_
502 _0@
@H_
502 _0@
lazy
@H_
502 _0@在默认情况下,v-model 在input 事件中同步输入框值与数据,可以
添加 一个特性lazy,input值发生改变时,不会同步到绑定的变量
//input值发生改变,msg不变
@H_
502 _0@
number
@H_
502 _0@如果想
自动 将
用户 的输入转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以
添加 一个特性 number:
@H_
502 _0@
//默认输入框内的值为字符串,
添加 number,可以将输入值转换为数字在同步到age
@H_
502 _0@
debounce
@H_
502 _0@设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入
提示 中 Ajax 请求),它较为有用.
内容0.5秒后同步到msg
vm.$watch({
'msg':function(val,oldval){
}
})
@H_
502 _0@注意 debounce 参数不会延迟 input 事件:它延迟“写入”底层数据(所以不适合ajax请求事件)。因此在使用debounce 时应当用 vm.$watch() 响应数据的变化。
@H_
502 _0@若想延迟 DOM 事件,应当使用debounce过滤器。
@H_
502 _0@
debounce过滤器
@H_
502 _0@
键盘间隔小于0.5秒,就不会发生onKeyup事件。
@H_
502 _0@包装处理器,让它延迟执行 x ms, 默认延迟 300ms。包装后的处理器在
调用 之后至少将延迟 x ms, 如果在延迟结束前再次
调用 ,延迟时长重置为 x ms。
@H_
502 _0@用此过滤器非常适合做ajax请求
@H_
502 _0@以上就是本文的全部
内容 ,希望对大家的学习有所帮助,也希望大家多多
支持 编程之家。