在 Vue.js 中，methods 选项用于定义可重用且与渲染模板独立的方法，这些方法通过事件处理程序响应用户交互，可提升代码可重用性、独立性、易测试性和事件处理能力。
Vue.js 中 methods 的作用
Vue.js 中的 methods 选项用于定义响应 Vue 实例特定动作的方法。这些方法为 Vue 组件提供了可重用且独立于渲染模板的逻辑。
如何使用 Methods
在 Vue.js 中定义 methods 的语法如下：
立即学习“前端免费学习笔记（深入）”；
methods: {
// 定义方法
methodName() {
// 方法中的代码
}
}Methods 的优点
使用 methods 有以下优点：
- 可重用性：方法可以在组件的不同部分中重复使用，从而提高代码的可读性和可维护性。
- 独立于模板：方法与渲染模板分离，这意味着可以轻松地将逻辑重用在不同的组件或应用程序中。
- 易于测试：方法可以独立于组件进行单元测试，简化了测试过程。
- 事件处理：经常与事件处理程序一起使用，响应用户交互。
在 Vue 组件中使用 Methods
可以在 Vue 组件中通过 this 调用 methods：
// 组件模板
// 组件脚本
methods: {
methodName() {
// 方法中的代码
this.someData = 'new value';
}
}当用户点击按钮时，methodName 方法将被调用，并更新组件数据中的 someData 属性。
示例
以下示例演示了如何使用 methods 来响应按钮点击：
export default {
methods: {
onClick() {
// 当按钮被点击时执行
console.log('按钮被点击了');
},
},
}; 
