vue3 scription 写一个按钮，点击后字体放大

在 Vue.js 3 中，你可以使用模板语法结合 `v-on` 指令来创建一个点击后字体放大的按钮。首先，你需要设置一个数据属性来控制字体大小的变化状态。这里是一个简单的示例：

<template>
  <div>
    <button @click="changeFontSize">点击放大字体</button>
    <p :style="{ fontSize: fontSize + 'px' }">
      这段文字会随着按钮操作改变大小
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fontSize: 16, // 初始字体大小
    };
  },
  methods: {
    changeFontSize() {
      this.fontSize = this.fontSize === 30 ? 16 : 30; // 如果当前大小为30，则还原到初始值16，反之则增大到30
    },
  },
};
</script>

在这个例子中，当用户点击按钮时，`changeFontSize` 方法会被调用，改变 `fontSize` 的值。`<p>` 标签的 `:style` 绑定了一个计算属性，它的值是动态的，根据 `fontSize` 的变化调整字体大小。