Vue.js功法之练气初期：复习知识点之事件处理（Event Handling）

事件处理（Event Handling）

在Vue.js中，通过使用v-on指令，你可以监听DOM事件并执行相应的处理函数。这使得你能够响应用户的交互，例如点击按钮、输入文本等。

为什么使用事件处理？

1. 与用户交互： 通过处理用户的输入、点击等事件，使应用程序能够与用户进行交互。
2. 动态更新数据： 事件处理函数中可以修改Vue实例中的数据，实现动态更新。

示例代码

假设我们有一个按钮，点击按钮时会触发一个事件，并更新数据：

<template>
  <div>
    <h2>事件处理示例</h2>
    <button @click="handleButtonClick">点击我</button>
    <p v-if="buttonClicked">按钮已点击！</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttonClicked: false,
    };
  },
  methods: {
    handleButtonClick() {
      // 处理按钮点击事件
      this.buttonClicked = true;
    },
  },
};
</script>