单击后如何在Vue中隐藏按钮？

Question

代码：

<v-btn large color="green"  @click="function">
   <v-icon>star</v-icon> Add
</v-btn>

Vue 中是否有解决方案，或者是否也可以通过 JavaScript 实现？

Answer 1

您可以使用vue onClick-event隐藏按钮v-on:click。

v-on:click="isHidden = true"

该属性isHidden可以设置为“true”，以便文本或按钮在v-if="!isHidden"添加到您选择的元素时不可见。

看看这个简单的片段：

v-on:click="isHidden = true"

var myApp = new Vue({
  el: '#myApp',
  data: {
    isHidden: false
  }
})

使用以下代码可以隐藏按钮 onClick：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

<div id="myApp">
  <button v-on:click="isHidden = true">Hide text</button>
  <button v-on:click="isHidden = !isHidden">Toggle text</button>

  <h1 v-if="!isHidden">Hide me</h1>
</div>

var myApp = new Vue({
  el: '#myApp',
  data: {
    isHidden: false
  }
})