当前位置： 移动技术网 > IT编程>网页制作>CSS > vue动态绑定class的最常用几种方式

vue动态绑定class的最常用几种方式

2019年05月27日  | 移动技术网IT编程  | 我要评论

vue动态绑定class的最常用几种方式：

 第一种：（最简单的绑定）

1.绑定单个class

 html部分：

 <div :class="{'active':isactive}"></div>

 js部分：判断是否绑定一个active

data() {
    return {
      isactive: true
    };
  }

结果渲染为：

<div class="active"></div>

 

2.若要绑定多个class，需要逗号隔开就行：（这里的activetwo加不加引号都可以，也一样都能渲染，如下）

 <div class="activeone" v-bind:class="{ activetwo: isactive, 'activethree': haserror }"></div>

js部分：判断是否绑定对应class

  data() {
    return {
      isactive: true,
      haserror: true
    };
  }

结果渲染为：

<div class="activeone activetwo activethree"></div>

 

第二种：（绑定的数据对象）

<div :class="classobject"></div>
data: {
  classobject: {
    active: true,
  }
}

 

第三种：（绑定一个返回对象的计算属性）

<div :class="classobject"></div>
export default {
  data() {
    return {
    isactive: true,
    };
  },
  computed: {
  classobject: function () {
    return {
      active: this.isactive,
    }
  }
}

结果渲染为：

<div class="active"></div>

 

第四种：（单纯数组方法）

<div :class="[activeclass, errorclass]"></div>
 data() {
    return {
      activeclass: "active",
      errorclass: "disactive"
    };
  },

结果渲染为：

<div class="active disactive"></div>

 

第五种：（数组与三元运算符结合判断选择需要的class）

<div :class="[isactive?'active':'disactive']"></div>
 data() {
    return {
      isactive: false,
    };
  },

结果渲染为：

<div class="disactive"></div>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网