methods 事件处理函数

最后更新：2026-10-22

methods 选项集中声明组件方法：事件处理、工具函数都写在这里，模板中通过名字调用。

📝 语法

export default {
  data() { return { count: 0 } },
  methods: {
    add(n) { this.count += n }
  }
}

value	对象：键为方法名，值为函数（this 指向组件实例）

返回值：无返回值约定（返回值不参与模板自动更新）

修改下面的代码，在预览区实时查看效果：

输出：

两个按钮分别加 1 和加 5。

⚠️ 注意 不要用箭头函数：箭头函数不绑定 this，拿不到组件实例。

💡 提示 模板里 @click="add" 传函数引用（自动收到事件对象），要传参才写括号。

ℹ️ 说明 派生值优先用 computed，methods 留给“有行为”的逻辑。

更多案例即将上线。

Q methods 和 computed 怎么分工？

A 需要缓存、当值用 → computed；需要参数、执行动作 → methods。

Q 为什么 this 有时是 undefined？

A 多半用了箭头函数，或把方法解构出来单独调用。

Q 能在 methods 里调另一个方法吗？

A 可以：this.other()，this 指向同一实例。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。