Vue.js中如何根据响应式数据动态切换按钮绑定的点击方法

你可以通过以下两种方式实现根据data值动态触发不同方法的需求：

方案1：模板内直接做条件判断（适合简单逻辑场景） #

无需修改JS代码，仅调整按钮的点击事件绑定即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Checklist:</h2>
  <button v-on:click="click === 'video' ? step1() : step2()">
  Click 1
  </button> 
</div>

对应的JS代码保持原有写法即可：

new Vue({
  el: "#app",
  data: {
    click:'video'
  },
  methods: {
    step1: function(){
        alert("click1")
    },
    step2: function(){
        alert("click2")
    }
  }
})

方案2：封装统一调度方法（适合逻辑复杂、后续可能扩展的场景） #

在methods中新增一个统一的点击处理函数，所有逻辑收敛到JS中维护，模板更简洁：
修改后的JS代码：

new Vue({
  el: "#app",
  data: {
    click:'video'
  },
  methods: {
    step1: function(){
        alert("click1")
    },
    step2: function(){
        alert("click2")
    },
    handleBtnClick: function(){
      if(this.click === 'video'){
        this.step1()
      }else{
        this.step2()
      }
    }
  }
})

对应的HTML代码绑定调度方法即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Checklist:</h2>
  <button v-on:click="handleBtnClick()">
  Click 1
  </button> 
</div>

优化建议：尽量避免用click作为自定义变量名，容易和原生点击事件名产生歧义，可改成btnType之类语义更明确的名称。

内容的提问来源于stack exchange，提问作者Vzupo