vue 点击切换字体颜色字体大小

您可以使用 Vue 的绑定语法，在按钮的点击事件中绑定一个函数，然后在该函数中切换字体颜色和字体大小。以下是一个简单的示例：

首先，在 Vue 实例中定义两个变量来存储当前字体颜色和字体大小：

data() {
  return {
    textColor: 'black',
    fontSize: '16px'
  }
}

然后，在 HTML 模板中使用这两个变量来绑定字体颜色和字体大小：

<div :style="{ color: textColor, fontSize: fontSize }">
  <!-- 页面内容 -->
  <button @click="toggleTextStyle">切换字体样式</button>
</div>

最后，在 Vue 实例中定义一个函数来切换字体颜色和字体大小：

methods: {
  toggleTextStyle() {
    if (this.textColor === 'black') {
      this.textColor = 'red';
      this.fontSize = '20px';
    } else {
      this.textColor = 'black';
      this.fontSize = '16px';
    }
  }
}

这样，每次点击按钮时，字体颜色就会在黑色和红色之间切换，字体大小也会在16px和20px之间切换。