VUE如何实现表单元素双向绑定

　　介绍

这篇文章给大家分享的是有关VUE如何实现表单元素双向绑定的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

VUE是什么

VUE是一套用于构建用户界面的渐进式JavaScript框架,VUE与其它大型框架的区别是,使用VUE可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用VUE可以采用单文件组件和VUE生态系统支持的库开发复杂的单页应用。

<强>复选框最基本用法:

& lt; input 类型=癱heckbox", v模型=癷nputdata",检查/比; 　　& lt; input 类型=癱heckbox", v模型=癷nputdata"/比; 　　& lt; input 类型=癱heckbox", v模型=癷nputdata"/比; 　　Vue ({new  　　el才能:“.......“, 　　数据:{才能 　　,,,inputdata: false //逻辑类型 　　,,} 　　准备:函数(){ 　　console.log (this.inputdata)//真实的 　　} 　　})

规则1:如果v模型绑定的变量类型为布尔值,若输入被选中,this.inputdata为真的,否则。inputdata为假的。

inputdata变量初始设置为false,但是在页面进行编译时,因为第一个输入为选中状态,所以更新inputdata为真,那么渲染结束之后三个输入均为选中状态,且三个输入状态同步。

& lt; input 类型=癱heckbox", value=癮", v模型=癷nputdata",检查/比; 　　& lt; input 类型=癱heckbox", value=癰", v模型=癷nputdata"/比; 　　& lt; input 类型=癱heckbox", value=癱", v模型=啊癷nputdata",检查/比; 　　Vue ({new  　　埃尔:“.......“,, 　　数据:{, 　　inputdata:[]//数组类型 　　}, 　　准备:函数(){, 　　console.log (this.inputdata)//(a、c) 　　}, 　　})

规则2:如果v模型绑定的变量类型为数组,那么绑定该变量的元素若被选中,把该元素的价值值添加进数组,若不被选中,那么把该元素的值从数组中去除。

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

<强>,无线电基本用法

& lt; input 类型=皉adio", value=癮", v模型=癷nputdata",/比; 　　& lt; input 类型=皉adio", value=癰", v模型=癷nputdata",检查/比; 　　& lt; input 类型=皉adio", value=癱", v模型=癷nputdata",检查/比; 　　 　　Vue ({new  　　el才能:“.......“, 　　数据:{才能 　　,,,inputdata:“a" 　　,,} 　　准备:函数(){ 　　console.log (this.inputdata)//c 　　} 　　})

规则:v模型绑定的变量值如果等于输入元素其中一个值值,那么该表单元素会被选中,如果不等于任何值输入的值,所有相关元素不选中。同时如果选中某个输入元素,那么该元素的价值值就会被赋给该变量,页面重新渲染。

如上,初始this.inputdata为“a",在编译到第二个输入时,因为属性为检查表示选中,该元素值为“b",所以this.inputdata值为“b",然后编译到第三个输入时,同样存在检查,所以this.inputdata为“c"。编译结束后,this.inputdata值为“c",页面最终渲染效果为第三个被选中,前两个未被选中。

<强>选择基本用法

& lt; select  v模型=皊elected"比; 　　,& lt; option> A 　　,& lt; option  selected> B</option> 　　,& lt; option> C 　　& lt;/select> 　　& lt; br> 　　& lt; span>选择:{{,selected  |, json }} & lt;/span> 　　 　　Vue ({new  　　埃尔:“....“, 　　数据:{ 　　selelcted:“A" 　　} 　　})

规则:v模型绑定的变量值如果等于选择元素其中一个值值,那么该元素会被选中。同时如果选中某个选项元素,那么该元素的价值值就会被赋给该变量。

如上,初始this.selected为“A",在编译到第二个选项时,因为属性为选定的表示选中,该元素文本值为“B"(如果选项值有价值,会优先值值),所以this.selected值为“B"。编译结束后,this.slected值为“B",页面最终渲染效果为第二个被选中。如果是可多选选择下拉框,规则基本同复选框的规则2

<强>属性基本用法

<强>懒惰

在默认情况下,v模型在输入事件中同步输入框值与数据,可以添加一个特性懒惰,输入值发生改变时,不会同步到绑定的变量

& lt; input 类型=皌ext", v模型=癿sg", lazy>//输入值发生改变,味精不变

<强>数量

如果想自动将用户的输入转数为类型(如果原值的转换结果为南则返回原值),可以添加一个特性数量:

VUE如何实现表单元素双向绑定