vue中动态添加class类名的方法

当我们需要根据不同的状态或条件为某个元素动态添加class类名时，Vue提供了多种实现方式。以下是其中的两种常见方法：

1.使用动态Class绑定

1.1 基本语法

Vue提供了动态Class绑定的语法，可以很方便地实现为元素动态添加class类名。

语法：:class="{class1:class1Condition, class2:class2Condition,...}"

其中，class1/2/...为需要绑定的class名称，class1Condition/class2Condition/...为条件，为真时绑定class，为假时解绑。多个class之间用逗号隔开，class名和条件之间用冒号隔开。

示例代码：

<template>
  <div :class="{red: isRed, bold: isBold}">Hello World !</div>
</template>

<script>
export default {
  data() {
    return {
      isRed: true,
      isBold: false,
    }
  },
}
</script>

<style>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

解释：当isRed为true时，文本字体颜色为红色；当isBold为false时，文本字体不加粗。

1.2 绑定对象语法

除了直接绑定条件外，也可以使用对象的形式来绑定class名和条件。

示例代码：

<template>
  <div :class="classObject">Hello World !</div>
</template>

<script>
export default {
  data() {
    return {
      classObject: {
        red: true,
        bold: false,
      },
    }
  },
}
</script>

<style>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

解释：通过classObject对象的属性值来控制class的绑定情况。

2.使用计算属性

2.1 基本思路

除了使用动态Class绑定之外，还可以使用计算属性来实现为元素动态添加class类名。这种方式既可以动态绑定class，也可以动态绑定style等其他属性。

基本思路是定义一个计算属性来实现动态计算class名，并将计算结果绑定到需要添加class的元素上。当计算属性值改变时，Vue会自动重新计算绑定的class名，从而实现动态添加class类名的效果。

示例代码：

<template>
  <div :class="myClass">Hello World !</div>
</template>

<script>
export default {
  data() {
    return {
      isRed: true,
      isBold: false,
    }
  },
  computed: {
    myClass() {
      var className = '';
      if (this.isRed) {
        className += ' red';
      }
      if (this.isBold) {
        className += ' bold';
      }
      return className
    },
  },
}
</script>

<style>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

解释：定义了一个名为myClass的计算属性，用于根据isRed和isBold的值动态计算class名，并将计算结果绑定到需要添加class的元素上。

2.2 混合使用

以上两种方法也可以混合使用，比如通过计算属性动态计算class名，并在class名后面添加固定的class。

示例代码：

<template>
  <div :class="['my-class', myComputedClass]">Hello World !</div>
</template>

<script>
export default {
  data() {
    return {
      isRed: true,
      isBold: false,
    }
  },
  computed: {
    myComputedClass() {
      var className = '';
      if (this.isRed) {
        className += ' red';
      }
      if (this.isBold) {
        className += ' bold';
      }
      return className
    },
  },
}
</script>

<style>
.my-class {
  font-size: 18px;
}
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

解释：定义了一个名为myComputedClass的计算属性，用于根据isRed和isBold的值动态计算class名，并在class名后面添加固定的class“my-class”，将计算结果作为class名绑定到需要添加class的元素上。