vue点击按钮时字体变颜色

在Vue.js中，当用户点击按钮时改变字体颜色通常需要结合HTML、CSS和JavaScript或者Vue的事件处理机制。以下是一个基本示例：

<!-- 使用v-on绑定点击事件 -->
<button @click="changeTextColor">点击改变字体颜色</button>
<p id="text" v-bind:class="{ active: isTextActive }">{{ message }}</p>

<script>
export default {
  data() {
    return {
      message: '初始文字',
      isTextActive: false,
    };
  },
  methods: {
    changeTextColor() {
      // 当点击按钮时，将isTextActive设置为true，激活CSS样式
      this.isTextActive = true;
      // 点击后，等待一段时间再恢复默认颜色（这里是简化的例子）
      setTimeout(() => {
        this.isTextActive = false;
      }, 2000); // 可以自定义延时时间
    },
  },
};
</script>

<style scoped>
.active {
  color: red; /* 更改字体颜色 */
}
</style>

在这个示例中，当你点击按钮时，`changeTextColor`方法会被触发，这会使`<p>`元素的`active`类生效，使其文本颜色变为红色。点击后，我们通过定时器让`isTextActive`再次变成`false`，从而恢复原色。