vue中，动态绑定样式——动态绑定style写法 & 动态class写法

<template>

<div>

 <div>
      <div :class="{dongtai : true , black : this.currentIndex > 6}">3333333</div>
 </div>

 <div>
  <div :style="{fontSize : 40 + 'px' , color : this.current > 5 ? 
     'blue':''}">555555555</div>
  </div>


</div>

</template>
<script>

export default {
  data() {
    return {
      currentIndex:2,
      current:6,
     }
  }

</script>

<style scoped>
.dongtai{
  color: #f1ca00;
}
.black{
  color: black;
}
</style>

​​​​​​​

//2.1.对象方法
<!—isActive —— true/false 
<div :class=”{ ‘active’: isActive  }”>{{name}}</div>

//2.2判断是否绑定一个active
<div :class="{'active' : isActive == -2}">{{name}}</div>

<div:class="{'active' : isActive == item.nameId}">{{item.name}}</div>

//2.3绑定并判断多个
//2.31 第一种：用逗号隔开
<div :class="{ 'active': isActive, 'user': isUser }"></div>
//2.32、放在data里面
<div :class="classObject">{{name}}</div>

<script>
data() {
  return {
    classObject:{ active: true, user:false }
  }
}
</script>
//2.33、使用computed属性
<div :class="classObject">{{name}}</div>

<script>
data() {
  return {
    isActive: true,
    isUser: false
  }
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      user:this.isUser
    }
  }
}
</script>

//2.4、数组方法
//2.41、单纯数组
<div :class="[isActive,isUser]">{{name}}</div>

<script>
data() {
  return{
    isActive:'active',
    isUser:'user'
 }
}
</script>
//2.42、数组与三元运算符结合判断选择需要的class
•	注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染
:class="[isActive?‘active’:’’]"
或者
:class="[isActive1?‘active’:’’]"
或者
:class="[isActiveindex?‘active’:’’]"
或者
:class="[isActive==index?‘active’:‘otherActiveClass’]"