用vue.js按下按钮时更改按钮 [英] change button while pressing it with vue.js

问题描述

基本上我想做的是单击我的按钮，然后立即隐藏此按钮并使其显示为另一个.

Basically what i want to do is clicking my button and immediately hide this button and make appear another.

我的两个按钮是:

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

Please i need a solution only with vue.js

推荐答案

您可以通过属性

You can condition the exibition of each button through a property via v-show. (In the demos below, the isFavorite property is being used.)

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

Then, in the click events you can change such property.

在 @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>

或者，如果您认为这样做可以提高代码的可读性，请使用多种方法:

Or, if you think it'd improve the readability of your code, using multiple methods:

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>

这篇关于用vue.js按下按钮时更改按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！