在 Vue js 中更改按钮文本和颜色

Question

我有这个按钮，我在 vue 组件文件中做的。

<td>
     <button id="save" type="submit" class="btn btn-primary my-2" v-on:click="added"> Add to Email List </button>
</td>

我想让这个按钮在用户点击时改变颜色和文本。示例点击前会显示“添加到邮件列表”，点击后会显示“已添加”并更改颜色（目前css中颜色为蓝色，点击后我想将其更改为绿色） .任何帮助将不胜感激。谢谢！

Answer 1

定义clicked变量，指示是否单击按钮。

<td>
  <button
    id="save"
    type="submit"
    v-bind:class="{ 'btn-danger': clicked, 'btn-primary': !clicked }"
    class="btn my-2"
    v-on:click="added" 
  >
    {{ clicked? "Added" : "Add to Email List" }}
  </button>
</td>

data: () => ({
  ...
  clicked: false
})
methods: {
  added() {
    this.clicked = true;
  }
}