如果需要在点击鼠标时,执行一个复杂的操作,那么采用单一的表达式 作为v-on
指令值就不够了 —— 我们需要将复杂的操作封装为Vue实例的 一个方法,然后将v-on
指令的值设置为这个方法。
使用methods
配置项来声明Vue实例的方法。当Vue.js创建一个Vue实例时, 会将methods
配置项中声明的方法,挂接到Vue实例对象上:
实例方法可以直接通过实例对象调用,例如,对于上图中的vm
实例:
vm.handler(); //正确
实例方法另一个常见的用途,是将方法名声明为v-on
指令的值,当事件 触发时将调用该实例对象上该名称的方法。例如,下面的代码为Vue实例声明 了reset
方法,并将其名称作为模板中button
元素的v-on
指令的值:
new Vue({
template: ‘<button v-on:click="reset">{{counter}}</button>‘,
data: { counter: 0},
methods: {
reset: function(){ this.counter = 0; }
}
})
方法函数体内的this对象
需要指出,在methods
配置对象中声明的方法,其函数实现体内,this
总是 指向所在的Vue实例。所以,可以在这些函数体内,直接访问通过data
配置项声明 的数据,比如this.counter
。
原文地址:https://www.cnblogs.com/yi-515/p/8855143.html
时间: 2024-10-07 16:15:09