vue 中js修改指定的class的样式

在 Vue 中使用 JavaScript 修改指定的 class 的样式，可以使用以下两种方式：

1. 使用计算属性绑定 class，并在样式中使用 class 选择器：

<template>
  <div :class="{'my-class': shouldAddClass}">
    ...
  </div>
</template>

<script>
export default {
  data() {
    return {
      shouldAddClass: true
    }
  },
  mounted() {
    const el = document.querySelector('.my-class');
    if (el) {
      el.style.color = 'red';
    }
  }
}
</script>

<style>
.my-class {
  /* empty */
}
</style>

2. 使用 ref 获取元素，并在样式中使用 ref 选择器：

<template>
  <div ref="myDiv">
    ...
  </div>
</template>

<script>
export default {
  mounted() {
    const el = this.$refs.myDiv as HTMLElement;
    el.classList.add('my-class');
    el.style.color = 'red';
  }
}
</script>

<style>
/* empty */
</style>

其中，第二种方式需要通过类型断言将 $refs.myDiv 转换为 HTMLElement 类型，以便使用 classList 属性和 style 属性。