Question

代码：

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

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

Answer 1

您可以使用vue onClick-事件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>

Answer 2

<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;
    }
  }
})

类似的东西应该起作用。如果 btn 为true，则将显示该按钮。如果按下按钮，则会触发 toggle 功能， btn 会更改为false。仅在 btn 为true时显示按钮。

Answer 3

您可以做的是使用CSS将一个类添加到元素中。现在，您可以在前面使用CSS规则隐藏元素。

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

例如

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

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

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

3 个答案: