编程方式改变@单击方法

Question

这是一个带@click处理元素的值：

<button @click="doSomething">doSomething</button> 

这个元素里面，我们怎么能编程与doSomethingElse改变doSomething价值？

Answer 1

将您希望作为处理程序的函数存储在变量中。

在这个例子中，handler是第一个按钮的点击处理程序。单击第二个和第三个按钮可更改handler设置的功能。

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     handler: this.doSomething, 
 
    } 
 
    }, 
 
    methods: { 
 
    doSomething() { 
 
     console.log('something') 
 
    }, 
 
    doSomethingElse() { 
 
     console.log('something else') 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <button @click="handler">Fire Click Handler</button> 
 
    <button @click="handler = doSomething">Make Handler Do Something</button> 
 
    <button @click="handler = doSomethingElse">Make Handler Do Something Else</button> 
 
</div>