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 元素的事件处理函数，直接在对应的事件监听处，写上方法名就可以了。