vue动态绑定class写法,vue中class的用法

　　本文主要介绍三种将vue绑定到类的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解一下。

一、对象语法

1、给v-bind:class 设置一个对象，可以动态地切换class，例如：

　　div id=应用程序

　　div:class= { active :is active } /div

　　/div

　　脚本

　　var app=新Vue({

　　埃尔： #app ，

　　数据：{

　　isActive:真的

　　}

　　})

　　/脚本

　　最终渲染结果：

　　div class=active/div

2、对象中也可以传入多个属性，来动态切换class。另外，:class可以与普通class共存，例如：

　　div id=应用程序

　　div class= static :class= { active :is active， error:isError}/div

　　/div

　　脚本

　　var app=新Vue({

　　埃尔： #app ，

　　数据：{

　　isActive:没错，

　　isError:false

　　}

　　})

　　/脚本

　　最终渲染结果(当数据isActive或isError发生变化时，对应的类也会更新):

　　div class=静态活动/div

　　3.当：class的表达式太长或者是逻辑计算的时候，也可以绑定一个计算属性，这是一种友好的常用用法。一般来说，当有两个以上的条件时，你可以使用数据或计算，例如：

　　div id=应用程序

　　div :class=classes/div

　　/div

　　脚本

　　var app=新Vue({

　　埃尔： #app ，

　　数据：{

　　isActive:没错，

　　isError:null

　　},

　　计算值：{

　　类(){

　　返回{

　　active:this.isActive！这个错误，

　　 text-fail :this . error this . error . type=== fail

　　}

　　}

　　}

　　})

　　/脚本

　　除了计算属性，你可以直接绑定一个对象类型数据，或者使用类似于计算属性的方法。

二、数组语法

1、当需要应用多个class时，可以使用数组语法，给：class绑定一个数组，应用一个class列表：

　　div id=应用程序

　　div :class=[atvieCls，errorCls]/div

　　/div

　　脚本

　　var app=新Vue({

　　埃尔： #app ，

　　数据：{

　　atvieCls:“活动”，

　　错误Cls:“错误”

　　}

　　})

　　/脚本

　　渲染的结果是：

　　div class=活动错误/div

2、使用三元表达式，根据条件切换class（当数据isActive为真时，样式active才会被应用）：

　　div id=应用程序

　　div :class=[isActive？activeCls: ，errorCls]/div

　　/div

　　脚本

　　var app=新Vue({

　　埃尔： #app ，

　　数据：{

　　isActive:没错，

　　atvieCls:“活动”，

　　错误Cls:“错误”

　　}

　　})

　　/脚本

　　渲染的结果是：

　　div class=活动错误/div

3、class有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法：

　　div id=应用程序

　　div:class=[{ active :is active }，errorCls]/div

　　/div

　　脚本

　　var app=新Vue({

　　埃尔： #app ，

　　数据：{

　　isActive:没错，

　　错误Cls:“错误”

　　}

　　})

　　/脚本

4、与对象语法一样，也可以使用data、computed、method三种方法，以计算属性为例：

　　div id=应用程序

　　按钮：class= classes /按钮

　　/div

　　脚本

　　var app=新Vue({

　　埃尔： #app ，

　　数据：{

　　尺寸：“大”，

　　禁用：真

　　},

　　计算值：{

　　类：函数(){

　　返回[

　　 btn ，

　　{

　　[btn- this.size]: this.size！==,

　　[btn-disabled]: this.disabled，

　　}

　　]

　　}

　　}

　　})

　　/脚本

　　渲染的结果是：

　　div class= BTN BTN-大型BTN-禁用/div

　　以上，将始终应用btn样式。当数据大小不为空时，将应用样式前缀btn-，后跟大小的值；当数据禁用为真时，应用样式btn-disabled。

　　在商业中，经常使用计算属性来动态设置元素的类名，尤其是在编写复用组件时。所以在开发过程中，如果表达式比较长或者逻辑比较复杂，应该尽可能优先考虑计算属性。

三、在组件上使用

　　如果在自定义组件上直接使用class或：class，样式规则将直接应用于该组件的根元素，例如声明一个简单组件：

　　脚本

　　Vue.component(我的组件，{

　　模板： p class=article some text /p

　　})

　　/脚本

　　然后，在调用组件时，使用对象语法或数组语法将类绑定到组件。以对象语法为例：

　　div id=应用程序

　　my-component:class= active :is active /my-component

　　/div

　　脚本

　　var app=新Vue({

　　埃尔： #app ，

　　数据：{

　　isActive:真的

　　}

　　})

　　/脚本

　　最终组件的渲染结果是：

　　Class= articleactive 一些文本/p

　　该方法只适用于自定义组件最外层是根元素的情况，否则无效。当不满足这个条件或者需要设置特定子元素的类名时，应该使用组件的props进行交付。

　　以上就是vue绑定类的三个方法的详细说明。更多关于vue绑定类的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。