跳到主要内容位置

Vue 3 中的 methods 方法使用教程

张旭乾

Vue 中的 methods 方法,或者也可以叫做函数。无论是在 Vue 中,还是在原生的 JavaScript 中,处理事件总是会涉及到比较复杂的业务逻辑,例如说表单验证,发起异步请求,或者是和产品具体业务有关的计算,这个时候,如果都像之前的例子那样直接把事件处理的代码写在 HTML 模板中,是不推荐的:

<button @click="showAnswer = !showAnswer">{{ label }}</button>

这种写法虽然简单,但是和 html 杂糅到了一起,另外也不方便逻辑复用,对于大量的业务逻辑代码,这种方式写起来就是灾难。好在 vue 提供了 methods 方法这个配置项,可以让我们定义一些方法来处理事件。

添加 methods 方法

要在 Vue 中定义方法,需要在 createApp() 的参数对象中,再添加一个 methods 方法配置项,它的值也是一个对象,在它里边可以定义应用程序要用到的方法:

const app = Vue.createApp({
data() {},
computed: {},
methods: {
toggleAnswer() {
this.showAnswer = !this.showAnswer;
},
},
});

这些方法和 JavaScript 中的对象方法没有区别,但是在它里边可以使用 this 访问 vue 实例,因此可以访问或修改 data 中的属性。 Vue 的 methods 最常见的用途是作为事件监听的处理函数,例如处理点击事件:

<button @click="toggleAnswer">{{ label }}</button>

那么只需要在事件监听的地方,写上方法的名字就可以了,在点击事件触发时,vue 会自动调用这个方法。

Vue methods 方法使用示例

好了,在了解了 methods 之后,我们实际使用它一下。继续我们上篇文章的例子,我们把 button 的 @click 事件处理代码放到方法中。 首先,打开 index.js 文件,在 createApp() 的参数对象里边,添加一个 methods 属性,它的值是一个对象:

const app = Vue.createApp({
data() {},
computed: {},
methods: {},
});

在 methods 对象里边,添加一个 toggleAnswer 方法,把之前按钮的点击处理逻辑写上,就是把 showAnswer 的值进行取反操作,要访问和修改 showAnswer 属性,需要使用 this 来获取当前 vue 实例,之后修改它里边的 showAnswer 属性:

 toggleAnswer() {
this.showAnswer = !this.showAnswer;
},

好,添加完方法之后,我们打开 index.html,在 button 标签里边,@click 这个事件监听里,把原有的代码删除,改成 toggleAnswer这个方法名:

<button @click="toggleAnswer">{{ label }}</button>

现在,按钮的点击事件就替换好了,我们运行测试一下,点击一下按钮,发现功能没有变化,也没有其它问题出现,那我们就成功的把事件处理改成了方法的形式。

Vue methods 方法教程小结

好了,这个就是 Vue 的 methods 方法的定义和使用方式,我们在 createApp() 的参数对象中,传递一个 methods 配置对象,在它里边可以添加应用程序会用到的方法,之后就可以在 html 模板中使用了,一般我们把方法用作 html 元素的事件处理函数,直接在对应的事件监听处,写上方法名就可以了。

提示

《Vue 3.x 全家桶完全指南与实战》课程已上线,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

新书《JavaScript 基础语法详解》已上架,可在京东、当当、淘宝等各大电商购买