【问题标题】:Change Button Text and Color in Vue js在 Vue js 中更改按钮文本和颜色
【发布时间】:2021-05-12 16:35:57
【问题描述】:

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

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

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

【问题讨论】:

    标签: html vue.js


    【解决方案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;
      }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-04-10
      • 2011-03-14
      • 2020-11-07
      相关资源
      最近更新 更多