vue2通过variable颜色切换

在Vue 2中，你可以使用变量（variables）来动态控制元素的颜色。首先，在`.vue`文件的样式部分或者全局样式表（`main.css`）中，定义一个颜色变量，例如：

:root {
  --primary-color: #007bff; /* 这里是你初始的颜色 */
}

然后，在你的组件模板中，可以使用`v-bind:class`属性结合变量来切换颜色。比如，有一个按钮需要改变背景色，你可以这样做：

<button v-bind:class="{ 'btn-primary': isPrimaryColor }">
  点击我
</button>

<script>
export default {
  data() {
    return {
      isPrimaryColor: true, // 初始状态为true，显示primary color
    };
  },
  methods: {
    toggleColor() {
      this.isPrimaryColor = !this.isPrimaryColor; // 当点击时，切换颜色变量的值
    }
  }
};
</script>

在这个例子中，当`isPrimaryColor`为`true`时，按钮背景会显示为`--primary-color`定义的颜色；当你调用`toggleColor`方法时，`isPrimaryColor`会被设置为`false`，按钮颜色会切换到其他预先定义好的颜色。