VUE实现表单元素双向绑定（总结）

2023-09-26 20:50:05 63

本文介绍了VUE实现表单元素双向绑定（总结），分享给大家，具体如下：

checkbox最基本用法:




newVue({
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状态同步。




newVue({
el:".......",
data:{
inputdata:[]//数组类型
}
ready:function(){
console.log(this.inputdata)//[a,c]
}
})

规则2：如果v-model绑定的变量类型为数组，那么绑定该变量的元素若被选中，把该元素的value值添加进数组，若不被选中，那么把该元素的value从数组中去除。

所以在v-model绑定的变量类型是数组的情况下，务必设置绑定该变量的每个元素的value值，且value值不要相等。见上例。

radio基本用法





newVue({
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基本用法



B




Selected:{{selected|json}}

newVue({
el:"....",
data:{
selelcted:"A"
}
})

规则：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值发生改变，msg不变

number

如果想自动将用户的输入转为Number类型（如果原值的转换结果为NaN则返回原值），可以添加一个特性number：


//默认输入框内的值为字符串，添加number，可以将输入值转换为数字在同步到age

debounce

设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中Ajax请求），它较为有用.

//输入内容0.5秒后同步到msg

vm.$watch({
'msg':function(val,oldval){

}
})

注意debounce参数不会延迟input事件：它延迟“写入”底层数据(所以不适合ajax请求事件)。因此在使用debounce时应当用vm.$watch()响应数据的变化。

若想延迟DOM事件，应当使用debounce过滤器。

debounce过滤器


//只要操作键盘间隔小于0.5秒，就不会发生onKeyup事件。

包装处理器，让它延迟执行xms，默认延迟300ms。包装后的处理器在调用之后至少将延迟xms，如果在延迟结束前再次调用，延迟时长重置为xms。

用此过滤器非常适合做ajax请求

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

VUE实现表单元素双向绑定（总结）

热门推荐

随机推荐