VUE动态绑定类名和样式

1、使用v-bind属性绑定class和style属性

2、动态类名两种方式：

- 对象形式：给对象属性赋boolean类型值

- 数组配合三元运算符，通过改变条件的真假实现类名的添加和删除

<template>
  <div>
    <div :class="classObj">动态绑定对象</div>
    <div :class="['namebox', activeStatus ? 'activeNamebox' : '']">
      动态绑定数组
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classObj: {
        namebox: true,
        activeNamebox: false
      },
      activeStatus: false
    }
  }
}
</script>

<style>
.namebox {
  color: #777;
}
.activeNamebox {
  background-color: aquamarine;
}
</style>

3、动态样式的两种方式

- 对象形式

- 数组(包含样式对象)形式：可以同时添加多个样式对象

<template>
  <div>
    <div :style="styleObj1">对象形式</div>
    <div :style="[styleObj1, styleObj2]">数组形式</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      styleObj1: {
        color: '#eee'
      },
      styleObj2: {
        textAlign: center
      }
    }
  }
}
</script>

<style></style>