Vue.js 示例：事件处理

在 Vue.js 中，事件处理是构建动态和交互式用户界面的关键。以下是一些事件处理的基本示例。

基础事件绑定

在 Vue.js 中，你可以使用 v-on 指令（或简写为 @）来绑定事件。

<button @click="increaseCounter">增加计数器</button>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    increaseCounter() {
      this.counter++;
    }
  }
};
</script>

事件修饰符

Vue.js 提供了事件修饰符来处理特定的事件行为，例如阻止默认事件、阻止事件冒泡等。

<a href="https://www.vuejs.org/" @click.prevent="handleClick">访问 Vue 官网</a>

事件对象

在事件处理函数中，你可以访问到事件对象 event，它包含了事件的相关信息。

methods: {
  handleClick(event) {
    console.log(event.target); // 输出被点击的元素
  }
}

绑定键盘事件

你还可以绑定键盘事件，例如 keyup、keydown 和 keypress。

<input @keyup.enter="handleEnter" />

图片展示

Vue.js Logo

更多信息

想要了解更多关于 Vue.js 的事件处理，可以访问官方文档。

[Vue.js 官方文档](/community/vuejs_docs)