在vue js中显示和隐藏框onclick

Posted 2023-02-22

【中文标题】在vue js中显示和隐藏框onclick

【英文标题】：Displaying and hiding box onclick in vue js

【发布时间】：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';
        
    
);

【参考方案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'
          

        
    
);