vue3 事件

<template>
  <div>
    <!-- 点击按钮触发 handle_click 方法 -->
    <button @click="handle_click">点击我</button>
    <!-- 输入框输入时触发 handle_input 方法 -->
    <input type="text" @input="handle_input" />
  </div>
</template>

<script>
export default {
  name: 'EventExample',
  methods: {
    // 定义 handle_click 方法，当按钮被点击时调用
    handle_click() {
      alert('按钮被点击了！');
    },
    // 定义 handle_input 方法，当输入框内容变化时调用
    handle_input(event) {
      console.log('输入的内容是:', event.target.value);
    }
  }
};
</script>

<style scoped>
/* 示例样式 */
button {
  margin-right: 10px;
}
</style>

解释说明：

• 模板部分 (<template>):

  • 使用 @click 绑定按钮的点击事件到 handle_click 方法。
  • 使用 @input 绑定输入框的输入事件到 handle_input 方法。

• 脚本部分 (<script>):

  • methods 中定义了两个方法：handle_click 和 handle_input。
  • handle_click 方法在按钮被点击时触发，并弹出一个提示框。
  • handle_input 方法在输入框内容变化时触发，并将输入的内容打印到控制台。

• 样式部分 (<style scoped>):

  • 给按钮添加了一些简单的样式。