VUE实现表单元素双向绑定

1、VUE实现表单元素双向绑定（总结）本文介绍了VUE实现表单元素双向绑定（总结），分享给大家，具体如下:最基本用法V逻辑类型规则：如果绑定的变量类型为，若被选中，为否则为。变量初始设置为，但是在页面进行编译时，因为第一个为选中状态，所以更新为，那么渲染结束之后三个均为选中状态，且三个状态同步。V数组类型规则：如果绑定的变量类型为数组，那么绑定该变量的元素若被选中，把该元素的值添加进数组，若不被选中，那么把该元素的从数组中去除。所以在绑定的变量类型是数组的情况下，务必设置绑定该变量的每个元素的值，且值不要相等。见上例。基本用法规则：绑定的变量值如果等于兀素其中一个值，那么该表单兀素会被选中，如果不

2、等于任何的值，所有相关元素不选中。同时如果选中某个元素，那么该元素的值就会被赋给该变量，页面重新渲染。如上，初始为，在编译到第二个时，因为属性为表示选中，该元素为所以值为然后编译到第三个时，同样存在，所以为。编译结束后，值为，页面最终渲染效果为第三个被选中，前两个未被选中。基本用法Selected:selected|jsonnewVue(el:.,data:selelcted:A)规则：v-model绑定的变量值如果等于option元素其中一个value值，那么该元素会被选中。同时如果选中某个option元素，那么该元素的value值就会被赋给该变量。如上，初始this.selected为A,

3、在编译到第二个option时，因为属性为selected表示选中，该元素text值为B(如果option有value值,会优先value值)，所以this.selected值为B。编译结束后，this.slected值为B，页面最终渲染效果为第二个被选中。如果是可多选select下拉框，规则基本同checkbox的规则2属性基本用法lazy在默认情况下，v-model在input事件中同步输入框值与数据，可以添加一个特性azy，input值发生改变时，不会同步到绑定的变量/input值发生改变，msg不变number如果想自动将用户的输入转为Number类型(如果原值的转换结果为NaN则返回原

4、值)，可以添加一个特性number:复制代码代码如下:inputv-model=agenumber/默认输入框内的值为字符串，添力加lumber，可以将输入值转换为数字在同步至Cagedebounce设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中Ajax请求)，它较为有用.输入内容0.5秒后同步到msgvm.$watch(msg:function(val,oldval)注意debounce参数不会延迟input事件：它延迟写入底层数据(所以不适合ajax请求事件)。因此在使用debounce时应当用vm.$watch()响应数据的变化。若想延迟DOM事件，应当使用debounce过滤器。debounce过滤器复制代码代码如下:/只要操作键盘间隔小于0.5秒，就不会发生onKeyup事件。包装处理器，让它延迟执行xms，默认延迟300ms。包装后的处理器在调用之后至少将延迟xms，如果在延迟