Question

当我单击图标cart时，我想隐藏并显示。问题在于再次隐藏该框，

图标，然后点击：https://imgur.com/RxmcwsX
点击后：https://imgur.com/cCt4mk0
这是CSS图像：https://imgur.com/d6ZPUbY
vue js：https://imgur.com/2kWZdly

mycss代码：

<li class="nav-item" id="cart">
<i class="fa fa-shopping-cart fa-lg" @click="showCart"></i>
<div id="list-cart">
    <div class="shadow-lg" style="position:absolute;background-color: #FFF;width:300px;height:300px;right:210px;top:60px;border-radius: 5px;" v-bind:style="{ visibility: computedVisibility }"></div>
</div>

vue代码

    var cart = new Vue({
    el: '#cart',
    data: {
        visibility: 'hidden'
    },
    computed: {
        computedVisibility: function() {
            return this.visibility;
        }
    },
    methods: {
        showCart: function(event) {
            this.visibility = 'visible';
        }
    }
});

Answer 1

使用v-if而不是直接操作样式：

<li class="nav-item" id="cart">
<i class="fa fa-shopping-cart fa-lg" @click="visible = !visible"></i>
<div id="list-cart">
    <div class="shadow-lg" v-if="visible"></div>
</div>

var cart = new Vue({
  el: '#cart',
  data: () => ({
    visible: false
  })
});

Answer 2

您可以尝试将其绑定到类。然后，您可以使用一个三元表达式来确定您的课程。

<li class="nav-item" id="cart">
<i class="fa fa-shopping-cart fa-lg" @click="showCart"></i>
<div id="list-cart">
    <div
     style="position:absolute;
     background-color: #FFF;
     width:300px;
     height:300px;
     right:210px;
     top:60px;
     border-radius: 5px;"
     v-bind:class="[visible ? 'show' : 'hide', 'shadow-lg']">
    </div>
</div>

然后您可以拥有一个可见的数据元素，该数据元素最初设置为false。您还应该make data a function

data: () => ({
  visible: false
})

那么您的购物车功能可以是：

showCart() {
        this.visible = !this.visible
    }

您也可以调用它来关闭购物车。

然后设置样式：

<style scoped>
  .show {
    visibility: visible
  }
.hide {
    visibility: hidden
  }
</style>

那就是说，有很多提供“模式”的软件包，这些将在很大程度上为您处理。我建议使用vuetify，但如果您是老式的类型，甚至可以使用引导程序。

Answer 3

如果问题中的给定脚本有效，则可以如下更改showCart函数。

    var cart = new Vue({
    el: '#cart',
    data: {
        visibility: 'hidden'
    },
    computed: {
        computedVisibility: function() {
            return this.visibility;
        }
    },
    methods: {
        showCart: function(event) {

          if(this.visibility ==='visible'){
                this.visibility = 'hidden';
          }else if(this.visibility==='hidden'){
                this.visibility = 'visible'
          }

        }
    }
});

在Vue JS中显示和隐藏框onclick

3 个答案: