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

代码：

星加

---

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

您可以使用

Vue onClick

-事件

v-on:click

隐藏按钮

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

如果将

v-if=“！ishiden”

添加到您选择的元素中，可以将属性

ishiden

设置为“true”，以便文本或按钮不可见

看看这个简单的片段：

var myApp=new Vue({
el:“#myApp”，
数据：{
伊希登：错
}
})

隐藏文本
切换文本
把我藏起来

您可以使用css向元素添加类。 在前面，您现在可以使用css规则隐藏元素

例如，可以传递元素的状态（即单击时隐藏或显示为组件的属性）

乙二醇

星加

到

星加

然后，您现在可以使用vue组件中的变量来了解是否需要显示或隐藏。就这些

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

这样的办法应该行得通。 如果btn为真，则将显示该按钮。 如果按下按钮，将触发切换功能，btn更改为false。只有当btn为真时，才会显示该按钮

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

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
        
<div id="app">
  <button v-if="btn" @click="toggle">Press to Hide This Button</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    btn: true
  },
  methods: {
    toggle() {
      this.btn = false;
    }
  }
})