单击时Vue切换按钮的颜色和文本

Question

我有一个按钮，我已经成功地修改过，所以点击它会调用一个函数

<button class="btn btn-primary btn-block" v-on:click="pauseEvent" type="button" role="button" id="" aria-expanded="false" style=" color: #6c757d; background-color: #FEEFB3; border:none; border-radius: .15;">
                Pause Event
            </button>

问题是我无法获得用于更改颜色和文本的功能。我已将其缩小到至少控制台在单击时记录一个触发器并且它正在工作。我应该如何正确地做到这一点，以便单击将在当前状态和另一个颜色为红色且文本为“恢复事件”的状态之间切换？

pauseEvent() {
      console.dir('paused');
    },

Answer 1

<button class="btn btn-primary btn-block" :style="{ 'background-color': color }" v-on:click="pauseEvent" type="button" role="button" id="" aria-expanded="false" style=" color: #6c757d border:none; border-radius: .15;">
            {{text}}
        </button>

您可以使用 Vue 数据功能。 Example of here

        data(){
            return {
                color: 'green',
                text: 'Started'
            }
        },
        methods: {
           pauseEvent() {
               this.color = 'red';
               this.text = 'Paused';
           },
        }