vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v模型指令实现双向绑定做一个介绍:
v模型这个指令只能用在& lt; input> & lt; select>, & lt; textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的数据与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的,例如:
var=https://www.yisu.com/zixun/{数据
名称:“埃里克”,
getName:函数(){
返回this.name;
},
setName:函数(名字){
this.name=名称;
}
};
之前
上面的代码中我们通过getName()和setName()方法作为访问器,我们可以进一步严格限制(如借助Object.defineProperty方法)不直接访问名字这个属性,所有对data.name的读写都必须通过data.getName()和data.setName()方法。此时我们改写访问器方法,添加对属性值改变得到监控,便可以实现数据的双向绑定。
那么在表单处理中我们具体如何使用v模型呢,先看看官方文档给出的例子:
id=把菔尽北? lt;形式;
& lt; !——文本——比;
& lt; p>
& lt;输入类型=拔谋尽眝模型=拔毒北?
{{味精}}
& lt;/p>
& lt; !——复选框在
& lt; p>
& lt;输入类型=案囱】颉眝模型=凹觳椤北?
{{检查& # 63;"是":"不"}}
& lt;/p>
& lt; !单选按钮,在
& lt; p>
& lt;输入类型=肮悴ァ眓ame="选择" value=" https://www.yisu.com/zixun/one " v模型=疤粞 北?
& lt;输入类型=肮悴ァ眓ame="选择" value=" https://www.yisu.com/zixun/two " v模型=疤粞 北?
{{选}}
& lt;/p>
& lt; !——选择比;
& lt; p>
& lt;选择v模型="选择"比;
& lt; option> one
& lt; option> two
& lt;/select>
{{选择}}
& lt;/p>
& lt; !多个选择,比;
& lt; p>
& lt;选择v模型=岸嘌 眒ultiple>
& lt; option> one
& lt; option> two
& lt; option> three
& lt;/select>
{{多选}}
& lt;/p>
& lt; p> & lt; pre>数据:{{$ | json数据2}}& lt;/pre> & lt;/p>
& lt;/form>
之前
对应的js:
新Vue ({
艾尔:#演示,
数据:{
味精:“嗨!”
检查:没错,
了:“一个”,
选择:“两个”,
多选:['一',' 3 ']
}
})
之前
效果如下:
小伙伴们可以尝试一下写出这个页面,在浏览器中当你调整上面表单元素的选中值时,你会发现下面打印的vue实例内容也会随之改变,而如果你在代码中改变vue实例数据内容时渲染出来的表单选中值也会随之改变。
另外,v模型这个指令还有几个可选的参数:懒惰,号码,选择,防反跳
1。使用懒惰参数是将双向数据同步的时间节点从输入触发改为了改变触发,调用方式如下:
& lt; !——同步在“改变”而不是“输入”——比;
& lt;输入v模型=拔毒眑azy>
之前
2。使用参数量数是通知v模型绑定的dom元素把用户输入值默认当成数字来处理,调用如下:
& lt;输入v模型=澳炅洹眓umber>
之前
,
3。使用选择参数是用于渲染一个选择项的列表,调用方式如下:
& lt;选择v模型="选择"选项=癿yOptions祝辞& lt;/select>
之前
其中选择的参数名指向一个数组,该数组可以包括字符串或对象,对象可以是{文本:“价值:“}的形式,指定了& lt; option>属的价值性与文本内容,例如:
(
{文本:“A”,值:' A '},
{文本:“B”,值:' B '}
)
将渲染出:
& lt; select>
& lt;选项vhttps://www.yisu.com/zixun/alue=癮”祝辞A
& lt;选项值=" https://www.yisu.com/zixun/b "祝辞B
& lt;/select>
之前
如果对象是{标签:“,选择:[…]}的形式,则可以渲染出多个选项组& lt; optgroup>,如下例:
(
{标签:‘一个’,选择:[A, b]},
{标签:“B”,选项:[' c ', ' d ']}
]
