在Vue中使用JavaScript修改CSS

在Vue中，您可以使用几种方法来使用JavaScript修改CSS。以下是一些常见的方法：

1. 直接修改element.style：

// 假设有一个元素的ref为myElement
this.$refs.myElement.style.color = 'red';

2. 使用v-bind:style绑定内联样式：

<div :style="{ color: dynamicColor, fontSize: dynamicFontSize + 'px' }"></div>

data() {
  return {
    dynamicColor: 'red',
    dynamicFontSize: 20
  };
}

3. 使用CSS类绑定通过Vue的class或style绑定应用样式：

<div :class="{ active: isActive }"></div>

data() {
  return {
    isActive: true
  };
}

4. 使用Vue的v-bind:class动态切换类：

<div :class="{ active: hasActivated, 'text-danger': error }"></div>

data() {
  return {
    hasActivated: true,
    error: false
  };
}

5. 使用Vue的v-bind:style绑定一个样式对象：

<div :style="dynamicStyles"></div>

data() {
  return {
    dynamicStyles: {
      color: 'red',
      fontSize: '20px'
    }
  };
}

6. 使用第三方库如animate.css通过条件渲染类名：

<div class="animate__animated animate__bounce" v-if="shouldAnimate"></div>

data() {
  return {
    shouldAnimate: true
  };
}

7. 使用JavaScript操作CSS规则（需要访问全局document对象）：

// 获取第一个样式表
let sheet = document.styleSheets[0];
 
// 在样式表的最后添加一条规则
sheet.insertRule('body { background-color: blue; }', sheet.cssRules.length);

选择合适的方法取决于您的具体需求和场景。在Vue中，通常推荐使用数据绑定来修改样式，因为这有利于Vue的响应式系统工作。