vue 通过点击切换文字和文字样式

很高兴回答你的问题。对于这个问题，我可以提供一些简单的建议来实现它。您可以使用 Vue 中的 v-bind 来绑定样式和文本内容，然后在点击事件中使用 v-on 来切换它们。具体的实现方式可以参考以下代码：

<template>
  <div>
    <button v-on:click="toggleTextStyle">Toggle Text Style</button>
    <p :style="textStyle">{{ textContent }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textContent: 'Hello Vue!',
      textStyle: {
        color: 'black',
        fontSize: '16px'
      }
    }
  },
  methods: {
    toggleTextStyle() {
      this.textStyle.color = this.textStyle.color === 'black' ? 'red' : 'black';
      this.textStyle.fontSize = this.textStyle.fontSize === '16px' ? '20px' : '16px';
    }
  }
}
</script>

在这个示例中，我们设置了一个文本内容和一个文本样式对象。然后我们在模板中使用 v-bind 绑定这些值。在点击按钮时，我们在 toggleTextStyle 方法中切换文本样式。这样，当您点击按钮时，它将切换文本颜色和字体大小。感谢您的提问，如果您还有其他问题，请随时问我。