在vue js中显示和隐藏框onclick答案

【问题标题】：Displaying and hiding box onclick in vue js在vue js中显示和隐藏框onclick
【发布时间】：2019-06-09 04:17:18
【问题描述】：

当我点击图标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';
        }
    }
});

【问题讨论】：

标签： javascript html css vue.js

【解决方案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
  })
});

【讨论】：

那是工作谢谢，但必须点击图标购物车，如何通过点击任何地方来消除它？
为此，您需要检测元素边界之外的点击。他是example。

【解决方案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，但如果你是老式类型，你甚至可以使用 bootstrap。

【讨论】：

我喜欢您的方法，因为在某些情况下，您希望单击将某些内容绑定到有条件隐藏的元素的扩展菜单。如果你使用 v-if 代替，元素将被有条件地从 DOM 中删除和添加，并且点击绑定可能会失败。

【解决方案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'
          }

        }
    }
});

【讨论】：