vue 点击事件

作者：至尊巅峰发布日期:2025-09-25 浏览:33

<template>
  <div>
    <button @click="handleClick">点击我</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '还没有点击按钮'
    };
  },
  methods: {
    handleClick() {
      this.message = '按钮被点击了!';
    }
  }
};
</script>

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

解释说明：

<template> 部分定义了 HTML 结构，包含一个按钮和一个段落。按钮绑定了一个点击事件 @click，当按钮被点击时会触发 handleClick 方法。
<script> 部分定义了 Vue 组件的逻辑：
- data 函数返回一个对象，其中包含组件的状态（例如 message）。
- methods 对象中定义了 handleClick 方法，该方法会在按钮被点击时改变 message 的值。
<style scoped> 部分可以用来定义组件的样式，这里没有具体的样式规则，但可以根据需要添加。

通过这个示例，你可以看到如何在 Vue 中使用点击事件来更新组件的状态。

上一篇：vue3 foreach

下一篇：vue 事件