class和style属性

Posted 2021-02-13 yaoyao-sun

值类型：

1、表达式计算出的字符串结果或者字符串。

2、对象（表达式或者对象名，建议采用对象名）

key为className，值的真假控制这个name的有无。

//class
<div v-bind:class="classObject"></div>
data: {
  classObject: {//或者在计算属性里，在切换class里比较常用
    active: true,
    ‘text-danger‘: false
  }
}

//style
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: ‘red‘,
    fontSize: ‘13px‘
  }
}

3、数组

一般使用对象，数组不好处理计算。

4、指令class与普通class属性共存

<div
  class="static"
  v-bind:class="{ active: isActive, ‘text-danger‘: hasError }"
></div>

data: {
  isActive: true,
  hasError: false
}
//渲染结果
<div class="static active"></div>