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

Question

代码：

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

Vue 中有解决方案还是也可以通过 JavaScript 解决？

原文由 lannenere 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 v-on:click="isHidden = true"

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

看看这个简单的片段：

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

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

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

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

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

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

原文由 user3596335 发布，翻译遵循 CC BY-SA 4.0 许可协议