vue动态修改class

方法一：对象语法

通过对象语法完成动态修改class

直接通过{}绑定一个类

<h1 :class="{red: isRed}">动态修改class</h1>

通过判断传入多个值

<h1 :class="{red: isRed, blue: isBlue}">动态修改class</h1>

可以和普通类同时存在

<h1 class="background" :class="{red: isRed, blue: isBlue}">动态修改class</h1>

完整示例

<template>
  <!-- active是class名，isActive为true时有这个class，isActive为false时没有这个class -->
  <!-- 可以指定多个class -->
  <h1 :class="{red: isRed, blue: isBlue}">动态修改class</h1>
</template>

<script>
export default {
  name: "default",
  data(){
    return {
      isRed: true,
      isBlue: true
    }
  }
}
</script>

<style>
  .background {
    background-color: grey;
  }
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
</style>

方法二：数组语法

完整示例

<template>
  <h1 class="background" :class="classList">动态修改class</h1>
</template>

<script>
export default {
  name: "default",
  data(){
    return {
      classList: ["red", "blue"]
    }
  }
}
</script>

<style>
  .background {
    background-color: grey;
  }
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
</style>