vue的 methods
时间: 2023-10-13 10:27:32 浏览: 39
methods 属性是一个对象,其中包含了组件中可以调用的方法。这些方法可以在模板中通过指令绑定或者在组件实例中通过调用方法名来使用。
示例:
```javascript
Vue.component('my-component', {
data: function () {
return {
count: 0
}
},
methods: {
increment: function () {
this.count++
}
},
template: '<button v-on:click="increment">{{ count }}</button>'
})
```
在上面的示例中,methods 中定义了一个名为 increment 的方法,它可以在模板中通过 v-on:click 指令来调用。当按钮被点击时,increment 方法会将 count 属性加一。
除了在组件中定义方法,也可以在 Vue 实例中定义方法。示例:
```javascript
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
```
在上面的示例中,methods 属性包含了一个名为 reverseMessage 的方法。当按钮被点击时,reverseMessage 方法会将 message 属性的值反转。
总之,methods 属性是 Vue 组件或实例中定义方法的地方,可以在模板或组件实例中调用这些方法。