这篇文章主要介绍vue中v模型和v-bind绑定数据的区别是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{名称}}的形式,一种是<代码> v-bind> v模型>
应用var=new Vue ({
艾尔:& # 39;#应用# 39;
模板:& # 39;& lt; div @click=皌oggleName"在{{名称}}& lt;/div> & # 39;
数据:{
名称:& # 39;汤姆# 39;
},
方法:{
toggleName () {
this.name=this.name===& # 39;汤姆# 39;,# 63;& # 39;索尼# 39;:& # 39;汤姆# 39;
},
},
}) 上面的字符串模板中,有一个{{名称}},它和data.name是绑定的,当data.name发生变化时,视图也发生变化。
但是<代码> v-bind 和<代码> v模型>
首先来看下v-bind,它的用法是后面加冒号,跟上html元素的归因,例如:
这里的v-bind:类会产生什么效果呢?实际上,首先你可以看下如果不加v-bind:,也就是:& lt; p类=癱lassed"祝辞,这只是一个普通的p元素,含有一个.classed的类,没有任何数据参与进来。
当加上v-bind:之后,就不一样了。它的值被不是字符串,而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值,它就会给类属性传递什么值,当数据。被发生变化的时候,类属性也发生变化,这非常适合用在通过css来实现动画效果的场合。除了类,其他大部分html原始的属性都可以通过这种方式来绑定,而且为了方便,它可以直接缩写成冒号形式,例如:
应用var=Vue ({
艾尔:& # 39;#应用# 39;
模板:& # 39;& lt; img src=皊rc"祝辞& # 39;
数据:{
src: & # 39; & # 39;
},
beforeMount () {
fetch(…),然后(……)。然后(res=比;这一点。src=res.src)//这里修改了data.src
},
}) 上面这段代码中,默认情况下data.src是空字符串,也就说不会有图片显示出来,但是当从远端获取到图片地址之后,更新了data.src,图片就会显示出来了。
v模型主要是用在表单元素中,它实现了双向绑定。双向绑定大家都非常熟了,简单的说就是默认情况下,它跟上面两种情况的数据绑定是一样的,实例的data.name发生变化的时候,对应的试图中也会发生变化。但是v模型绑定后,它还会反过来,在输入中手动输入新的内容,会反过来修改data.name的值,如果在视图中其他地方使用到了data.name,那么这个地方就会因为data.name的变化而变化,从而实现关联动态效果。下面来举个栗子:
应用var=Vue ({
艾尔:& # 39;#应用# 39;
模板:& # 39;& lt; label> & lt;输入v模型=皀ame"在{{名称}}& lt;/label> & # 39;
数据:{
名称:& # 39;& # 39;
},
}) 上面& lt; input>中绑定了名字,那么当输入的值发生变化时,data.name就会跟着发生变化,而data.name变化了{{名称}}的地方也会跟着变化。
v模型是一种双向绑定,那么也就是说,你绑定的元素得有机会改变值,所以实际上v模型基本上只会用在输入,文本区域,选择这些表单元素上。
有一些情况我们需要v-bind和v模型一起使用。这个时候如果不留神,就会搞乱状况,分不清哪里应该怎么控制。举个栗子:
上面就是一个栗子.data.name和data.body,到底谁跟着谁变呢?甚至,它们会不会产生冲突呢?
实际上它们的关系和上面的阐述是一样的,v-bind产生的效果不含有双向绑定,所以:价值的效果就是让输入的值属性值等于data.name的值,而v模型的效果是使输入和data.body建立双向绑定,因此首先data.body的值会给输入的值属性,其次,当输入中输入的值发生变化的时候,data.body还会跟着改变。
现在的问题是,当这两个一起使用的时候,谁都优先级高?谁会无效?实验证明,v模型将会被使用,v-bind这个时候无效了,因为它正好绑定在价值属性上,如果绑在其他属性上v-bind是不受影响的。在这种情况下,v-bind失效,即使你修改data.name,输入里面不会有任何变化。
这也说明,v模型建立的双向绑定对输入型元素输入,文本区域,选择等具有优先权,会强制实行双向绑定,如果你愿意的话。
