用vue.js按下它时改变按钮

Question

基本上我想要做的就是点击我的按钮并立即隐藏这个按钮，然后再显示另一个按钮。

我的两个按钮是：

<button @click="" value="Add to favorites" style="font-weight: 700;color:#428bca;margin-left:30px;height:30px;border-radius:4px" name="favorites">Add to favorites</button>

<button @click="" value="Delete from favorites" style="font-weight: 700;color:#428bca;margin-left:30px;height:30px;border-radius:4px" name="delete" v-if="show">Delete from favorites</button>

请仅使用vue.js

解决方案

Answer 1

您可以通过属性via v-show来限制每个button的展示。 （在下面的演示中，正在使用isFavorite属性。）

然后，在click事件中，您可以更改此类属性。

在@click：

中更改直接

new Vue({
  el: '#app',
  data: {
    isFavorite: false
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="isFavorite = true" v-show="!isFavorite">Add to favorites</button>
  <button @click="isFavorite = false" v-show="isFavorite">Delete from favorites</button>
</div>

或通过：

更改

new Vue({
  el: '#app',
  data: {
    isFavorite: false
  },
  methods: {
    toggleFavorite() {
      this.isFavorite = !this.isFavorite;
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="toggleFavorite" v-show="!isFavorite">Add to favorites</button>
  <button @click="toggleFavorite" v-show="isFavorite">Delete from favorites</button>
</div>

或者，如果您认为它提高了代码的可读性，请使用多种方法：

new Vue({
  el: '#app',
  data: {
    isFavorite: false
  },
  methods: {
    addToFavorites() {
      this.isFavorite = true;
    },
    deleteFromFavorites() {
      this.isFavorite = false;
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="addToFavorites" v-show="!isFavorite">Add to favorites</button>
  <button @click="deleteFromFavorites" v-show="isFavorite">Delete from favorites</button>
</div>