vue 事件

作者：未來的款姐＂发布日期:2025-09-25 浏览:39

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

<script>
export default {
  data() {
    return {
      message: '欢迎使用 Vue!'
    }
  },
  methods: {
    // 定义一个方法，当按钮被点击时执行
    clickEvent() {
      this.message = '你点击了按钮!';
      console.log('按钮被点击了');
    }
  }
}
</script>

<style scoped>
/* 这里可以添加样式 */
</style>

解释说明：

@click 是 Vue.js 中用于绑定点击事件的指令。当用户点击按钮时，会触发 clickEvent 方法。
data() 函数返回一个对象，其中包含组件的状态数据。在这个例子中，message 是一个状态变量，初始值为 "欢迎使用 Vue!"。
methods 对象中定义了组件的方法。clickEvent 方法会在按钮被点击时改变 message 的值，并在控制台输出一条消息。

如果你需要更多关于 Vue 事件的详细信息，请查阅官方文档。

上一篇：vue 点击事件

下一篇：vue3函数式组件