vue.js - 以编程方式更改@click 方法的值

Question

这是一个带有 @click 处理程序的元素:

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

在这个元素中，我们如何以编程方式将 doSomething 的值更改为 doSomethingElse？

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>