Vue中V-bind指令的作用有哪些

Vue中V-bind指令的作用有哪些?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强>引子

v-bind 主要用于属性绑定,Vue官方提供了一个简写方式:绑定,例如:

& lt; !——,完整语法,——比; 　　https://www.yisu.com/zixun/& lt; a v-bind: href=" url "> 　　　　<一个:href=" url ">

<强>,一,概述

,,,,,v-bind 主要用于属性绑定,比方你的类属性,风格属性,价值属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定。

,,,,,示例:

& lt; !——,绑定一个属性,——比; 　　& lt; img https://www.yisu.com/zixun/v-bind: src=" imageSrc "> 　　　　:

　　　　<组件:道具="东西"> 　　　　<子组件v-bind=" $道具"> 　　　　

<强>二,绑定HTML类

对象语法

,,,,,,我们可以传给v-bind:类一个对象,以动态地切换类

& lt; div v-bind:类=皗,活跃:isActive }“祝辞& lt;/div>

,,,,,上面的语法表示活跃这个类存在与否将取决于数据属性isActive的真实

你可以在对象中传入更多属性来动态切换多个类。此外,v-bind:类指令也可以与普通的类属性共存。当有如下模板:

& lt; div 类=皊tatic" 　　v-bind才能:类=皗,活跃:isActive,, & # 39; text-danger& # 39;:, hasError }“比; 　　& lt;/div> 　　和才能如下,数据　　　　数据:{ 　　,isActive:没错, 　　,hasError:假的　　}

,,,,,,结果渲染为:

& lt; div 类=皊tatic active"祝辞& lt;/div>

,,,当isActive或者hasError变化时,类列表将相应地更新。例如,如果hasError的值为true,类列表将变为“静态活动text-danger"

,,,,,绑定的数据对象不必内联定义在模板里

& lt; div v-bind:类=癱lassObject"祝辞& lt;/div> 　　数据:{ 　　,classObject: { 　　,活跃:没错, 　　,& # 39;text-danger& # 39;:假　　,} 　　}

,,,,,,渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:

& lt; div v-bind:类=癱lassObject"祝辞& lt;/div> 　　　　数据:{ 　　,isActive:没错, 　　,错误:null 　　}, 　　计算:{ 　　,classObject: function (), { 　　,return { 　　活跃的才能:this.isActive ,,, ! this.error, 　　& # 39;才能text-danger& # 39;:, this.error ,,, this.error.type ===, & # 39;致命的# 39; 　　,} 　　,} 　　}

<>强数组语法

,,,我们可以把一个数组传给v-bind:类,以应用一个类列表

& lt; div v-bind:类=癧activeClass, errorClass]“祝辞& lt;/div> 　　数据:{ 　　,activeClass: & # 39;活跃# 39; 　　,errorClass: & # 39; text-danger& # 39; 　　}

,,渲染为:

& lt; div 类=癮ctive text-danger"祝辞& lt;/div>

,,,,如果你也想根据条件切换列表中的类,可以用三元表达式

& lt; div v-bind:类=癧isActive ?, activeClass :, & # 39; & # 39;,, errorClass]“祝辞& lt;/div>

,,,这样写将始终添加errorClass,但是只有在isActive是真相时才添加activeClass。

,,,,不过,当有多个条件类时这样写有些繁琐,所以在数组语法中也可以使用对象语法

& lt; div v-bind:类=癧{,活跃:isActive },, errorClass]“祝辞& lt;/div>

<强>三,用在组件上

,,,,,,,当在一个自定义组件上使用类属性时,这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。