vue 动态添加类名

1.通过字符串的方式(常用三元表达式)

<template>
  <div>
    <div class="test" :class="show?'red':'yellow'">
      <button @click="btn1">点击</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    btn1() {
      this.show = !this.show;
    }
  },
}
</script>
<style scoped>
.test {
  padding: 20px;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}
</style>

2.通过对象的方式

   格式：{‘className’:Boolean,‘className1’:Boolean}

<template>
  <div>
    <div class="test" :class="{'red':show,'yellow':!show}">
      我是div
      <button @click="btn1">点击</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    btn1() {
      this.show = !this.show;
    }
  },
}
</script>
<style scoped>
.test {
  padding: 20px;
}

.red {
  background-color: red;
}

.yellow {
  color: yellow;
}
</style>

3.通过数组的方式

   格式：[‘className1’,{‘className2’:true}]
className1为原来已经有的类名，className2是动态添加的

<template>
  <div>
    <div class="test" :class="['red',{'yellow':show}]">
      我是div
      <button @click="btn1">点击</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    btn1() {
      this.show = !this.show;
    }
  },
}
</script>
<style scoped>
.test {
  padding: 20px;
}

.red {
  background-color: red;
}

.yellow {
  color: yellow;
}
</style>