使用 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>