class和style属性

Posted yaoyao-sun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了class和style属性相关的知识,希望对你有一定的参考价值。

值类型:

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>

 

以上是关于class和style属性的主要内容,如果未能解决你的问题,请参考以下文章