vue中class绑定

vue中class绑定的语法格式

1. 对象绑定

:class="{ 'class名': 表达式|布尔值 }"

<div :class="{'action':this.static}"></div>
<script>
export default {
  data() {
    return {
      static: true
    };
  },
};
</script>

运行结果:<div :class="action"></div>

2. 数组绑定

(1) :class="['class名1', 'class名2', '...']"

<div :class="['action','static']"></div>

运行结果:<div :class="action static"></div>

(2) :class="['class名1', { 'class名': 表达式|布尔值 }]"

<div :class="['action',{'static':this.static}]"></div>
<script>
export default {
  data() {
    return {
      static: true
    };
  },
};
</script>

运行结果:<div :class="action static"></div>

(3) :class="['class名1', 表达式 ? 'class名' : '']"

<div :class="['action',this.static==='vue'?'stcor':'']"></div>
<script>
export default {
  data() {
    return {
      static: 'vue'
    };
  },
};
</script>

这里运用的是三元运算符

运行结果:<div :class="action stcor"></div>