vue动态添加class的几种方式

8,269 阅读1分钟

编写时间: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';
      }
  }