編程方式改變@單擊方法

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>