vuejs中按钮中的两个功能

Question

我想检查按钮是否已被选中并触发一个功能，如果也没有选择触发另一个功能，如何使用vuejs

Answer 1

这是一个jsfiddle：https://jsfiddle.net/16wp2wao/

有一些更简洁的方法可以做到这一点，但这是最简单的看到发生了什么。我们的想法是在data属性中存储事物的状态，因此当选择了按钮时，只需将选中的状态设置为true。

var myVueInstance = new Vue({
    el: '#app',
    data: function () {
    return {
        buttonIsSelected: false,
      message: ''
    }
  },
  methods: {
    handleClick: function(){
        if ( this.buttonIsSelected == true ){
        this.whenSelected()
      } else {
        this.whenNotSelected()
      }

      //now set the selected state to true
      this.buttonIsSelected = true;

    },
    whenSelected: function(){
        this.message = "The button was clicked - it was already selected"
    },
    whenNotSelected: function(){
    this.message = "The button was clicked - it was not already selected"
    }
  }
});