vue用按钮改变文本颜色

在Vue.js中，你可以通过绑定事件和操作数据来改变按钮点击时的文字颜色。这里是一个简单的例子：

首先，在HTML部分，创建一个按钮并绑定`@click`事件到一个名为`changeColor`的方法：

<button @click="changeColor">点击改变文字颜色</button>
<p id="text" v-bind:class="{ active: isColorChanged }">{{ text }}</p>

然后，在你的Vue实例中，定义`changeColor`方法以及相关的状态`isColorChanged`和`text`：

export default {
  data() {
    return {
      isColorChanged: false,
      text: '默认颜色',
    };
  },
  methods: {
    changeColor() {
      this.isColorChanged = !this.isColorChanged; // 切换颜色标志
      if (this.isColorChanged) {
        this.text = '红色'; // 如果颜色变化，则将文本设为红色
      } else {
        this.text = '默认颜色'; // 否则恢复默认颜色
      }
    },
  },
};

在这个示例中，当按钮被点击时，`isColorChanged`的状态会被反向切换，然后`v-bind:class`会根据`isColorChanged`的值来动态地应用一个CSS类（假设你已经在CSS中定义了一个`.active { color: red; }`）。如果`isColorChanged`为真，文字颜色变为红色；否则保持默认。