VUE实现表单元素双向绑定.doc

VUE
实现表单元素双向绑定（总结）
本文介绍了VUE实现表单元素双向绑定（总结），分享给大家，具体如下:最基本用法
V
逻辑类型
规则：如果绑定的变量类型为，若被选中，为否则为。
变量初始设置为，但是在页面进行编译VUE
实现表单元素双向绑定（总结）
本文介绍了VUE实现表单元素双向绑定（总结），分享给大家，具体如下:最基本用法
V
逻辑类型
规则：如果绑定的变量类型为，若被选中，为否则为。
变量初始设置为，但是在页面进行编译时，因为第一个为选中状态，所以更新为，那么渲染
结束之后三个均为选中状态，且三个状态同步。
V
数组类型
规则：如果绑定的变量类型为数组，那么绑定该变量的元素若被选中，把该元素的值添加进数组，若不被选
中，那么把该元素的从数组中去除。
所以在绑定的变量类型是数组的情况下，务必设置绑定该变量的每个元素的值，且值不要相等。见上例。
基本用法
规则：
绑定的变量值如果等于兀素其中一个值，那么该表单兀素会被选中，如果不等于任何的
值，所有相关元素不选中。同时如果选中某个元素，那么该元素的值就会被赋给该变量，页面重新渲染。
如上，初始为，在编译到第二个时，因为属性为表示选中，该元素为所以
值为然后编译到第三个时，同样存在，所以为。编译结束后，值
为，页面最终渲染效果为第三个被选中，前两个未被选中。
基本用法
<br>
<span>Selected:{{selected|json}}</span>
newVue({
el:"....",
data:{
selelcted:"A"
}
})
规则：v-model绑定的变量值如果等于option元素其中一个value值，那么该元素会被选中。同时如果选中某个option元素，那么该元素的value值就会被赋给该变量。
如上，"A",在编译到第二个option时，因为属性为selected表示选中，该元素text值为"B"(如果option有value值,会优先value值)，"B"。编译结束后，"B"，页面最终渲染效果为第二个被选中。如果是可多选select下拉框，规则基本同checkbox的规则2
属性基本用法
lazy
在默认情况下，v-model在input事件中同步输入框值与数据，可以添加一个特性azy，input值发生改变时，不会同步到绑定的变量
<inputtype="text"v-model="msg"lazy>//input值发生改变，msg不变
number
如果想自动将用户的输入转为Number类型(如果原值的转换结果为NaN则返回原值)，可以添加一个特性number:
复制代码代码如下:
<inputv-model="age"number〉/默认输入框内的值为字符串，添力加lumber，