知识点v-bind绑定class和v-on的基本使用 要求1:点击按钮的时候，字体是黑色的就变为红色，字体是红色的就变为黑色 要求2:必须使用v-bind绑定class 说明：初始的时候颜色是黑色

在Vue.js中，要实现这个需求，你可以使用`v-bind:class`指令来动态绑定元素的CSS class，并结合`v-on:click`监听按钮的点击事件来切换字体颜色。这里是一个简单的例子：

<template>
  <div id="app">
    <button @click="toggleColor">点击切换字体颜色</button>
    <p v-bind:class="{ active: isRed }">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRed: false,
      message: '初始字体颜色为黑色'
    };
  },
  methods: {
    toggleColor() {
      this.isRed = !this.isRed; // 切换isRed的状态
    }
  }
};
</script>

<style scoped>
.active {
  color: red;
}

/* 初始状态 */
p {
  color: black;
}
</style>

在这个示例中，`v-bind:class`将`active` class绑定到段落上。`isRed`属性控制了`active` class是否应用，当`isRed`为`true`时，字体变为红色；当`isRed`为`false`（默认）时，字体恢复为黑色。

当用户点击按钮时，`toggleColor`方法会被调用，会改变`isRed`的值，从而触发颜色的切换。