Vue 之按钮变化

之前在做Vue项目的时候（新手），遇到一个问题，就是当用户点击报名按钮的时候，按钮上的文字应该变成“取消报名”了。但是之前一直调不出来。然后就去看Vue的文档，最后把它调出来了。

    <el-button v-on:click="ok1">
      <span v-if="a==='1'">{{b}}</span>
      <span v-else>{{c}}</span>
    </el-button>


data(){
    return {
      a:'1',
      b:'报名',
      c:'取消报名',
  },
  methods: {
    ok1(){
      if(this.$data.a=='1')this.$data.a='2';
      else this.$data.a='1';
    }
}

　　这里用到是on:click监听事务，这样更改之后页面就会发生改变