vue3点击事件

<template>
  <div>
    <!-- 点击按钮时触发 handle_click 方法 -->
    <button @click="handle_click">点击我</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始化 message 变量
      message: '欢迎来到 Vue3'
    }
  },
  methods: {
    // 定义 handle_click 方法，当按钮被点击时执行
    handle_click() {
      this.message = '你点击了按钮！';
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

• <template> 部分定义了 HTML 结构，其中包含一个按钮和一段文本。按钮绑定了一个 @click 事件，当按钮被点击时会触发 handle_click 方法。
• <script> 部分定义了组件的逻辑。data 函数返回一个对象，其中包含了一个 message 属性，用于存储显示的消息。methods 对象中定义了 handle_click 方法，该方法会在按钮被点击时改变 message 的值。
• <style scoped> 部分可以用来定义组件的样式，这里没有具体的样式，但可以根据需要添加。

希望这个示例能帮助你理解如何在 Vue3 中使用点击事件。