Vue添加动态类不会更改当前类

是因为Vue在处理动态类时，会将类名作为一个对象的属性，并将其值设置为true或false。当类名作为对象属性时，Vue会将其转换为字符串，并将其添加到元素的class属性中。但是，当动态类发生变化时，Vue只会更新class属性中的值，而不会更改当前类。

这种行为是由Vue的响应式系统决定的。Vue使用虚拟DOM来跟踪和更新DOM的变化。当动态类发生变化时，Vue会重新计算虚拟DOM，并将新的类名添加到class属性中。然后，Vue会将新的虚拟DOM与旧的虚拟DOM进行比较，并只更新需要更改的部分。因此，即使动态类发生变化，Vue也只会更新class属性中的值，而不会更改当前类。

为了解决这个问题，可以使用Vue的计算属性或方法来动态计算类名，并将其绑定到元素上。这样，当动态类发生变化时，Vue会重新计算类名，并将新的类名应用到元素上，从而更改当前类。

以下是一个示例代码，演示了如何使用计算属性来动态添加类：

<template>
  <div :class="dynamicClass"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
  computed: {
    dynamicClass() {
      return {
        active: this.isActive
      };
    }
  }
};
</script>

在上面的代码中，我们使用了一个计算属性dynamicClass来动态计算类名。该计算属性返回一个对象，其中键是类名，值是一个布尔值，用于控制是否添加该类。在这个例子中，我们根据isActive属性的值来决定是否添加active类。当isActive为true时，active类将被添加到元素上，从而更改当前类。

推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm