vue 修改css变量

在Vue中修改CSS变量可以通过以下步骤实现：

1. 在Vue组件的样式中声明CSS变量。可以使用`:root`伪类选择器来声明全局的CSS变量，也可以在具体的组件样式中声明局部的CSS变量。例如：

:root {
  --primary-color: #ff0000;
}

.my-component {
  --background-color: #ffffff;
}

2. 在模板中使用CSS变量。可以使用`var()`函数来引用CSS变量。例如：

<template>
  <div class="my-component" :style="{ backgroundColor: 'var(--background-color)' }">
    <p :style="{ color: 'var(--primary-color)' }">Hello, Vue!</p>
  </div>
</template>

3. 修改CSS变量的值。可以通过Vue的数据绑定机制来动态修改CSS变量的值。例如，在Vue组件的`data`选项中定义一个变量，并在模板中使用该变量来修改CSS变量的值。例如：

<template>
  <div class="my-component" :style="{ backgroundColor: dynamicBackgroundColor }">
    <p :style="{ color: dynamicPrimaryColor }">Hello, Vue!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicBackgroundColor: 'var(--background-color)',
      dynamicPrimaryColor: 'var(--primary-color)'
    };
  },
  mounted() {
    // 修改CSS变量的值
    this.dynamicBackgroundColor = '#000000';
    this.dynamicPrimaryColor = '#00ff00';
  }
};
</script>

通过以上步骤，你可以在Vue中修改CSS变量的值，实现自定义样式。