vue动态添加class的几种方式

编写时间：2019-08-22
更新时间：2019-08-22

作者：鬼小妞

备注： 本文整理了vue动态添加class的几种方式

状态：已完成、待整合2019-08-22

p1，p为类名

【对象】

对象的形式: 用花括号包裹起来，类名用引号，

第一个参数 类名， 第二个参数：boolean值

优点: 以对象的形式可以写多个，用逗号分开

• html :class="{'p1' : true}"
• html :class="{'p1' : false, 'p': true}"

【数组】

• html :class="['p1', 'p2']"
• html :class="[{'p1':true}]"
• html :class="[{'p1': false}, 'p2']"

三元表达式

注意点：放在数组中，类名要用引号

• html :class="[ 1 < 2 ? 'p1' : 'p' ]"

【返回方法】class中还可以传方法，在方法中返回类名

• html :class="setClass"

method: {
  setclass () {
        return 'p1';
      }
  }
  
复制代码

转载于:https://juejin.im/post/5d5df8016fb9a06b2766d1e6