Javascript 在vue js中显示和隐藏框onclick

我想在单击图标

购物车时隐藏和显示。问题是要把那个盒子再藏起来

单击前的图标：

点击后：

这是css图像：

vue js:

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>

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


var cart=new Vue({
el:'购物车'，
数据：（）=>({
可见：假
})
});
如果问题中的给定脚本有效，您可以按如下所示更改
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'
          }

        }
    }
});

您可以尝试将其绑定到类。然后你可以有一个三元表达式来决定你的类

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

然后，您的show cart功能可以是：

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

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

然后设置您的样式：

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


.表演{
可见性：可见
}
.隐藏{
可见性：隐藏
}

也就是说，有很多软件包提供“modals”，这在很大程度上是为您处理的。我推荐vuetify，但如果你是老式类型，你甚至可以使用bootstrap。
这是工作，谢谢，但这必须是单击图标购物车，如何通过单击任意位置来消除它？要做到这一点，你需要检测元素边界外的单击。我喜欢你的方法，因为在一些情况下，比如一个扩展菜单，你想点击绑定一些有条件隐藏的元素。如果改用v-If，元素将有条件地从DOM中删除和添加，并且clickbinding可能会失败。
showCart() {
        this.visible = !this.visible
    }

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