如何使用js动态显示或隐藏DIV

Posted 2023-03-31

方法很多，最直观的就是用js控制div的display值，例如：

var div = document.getElementById('divID');
div.style.display = 'none';  // div隐藏
div.style.display = 'block';  // div显示

也可以写一段CSS，用CSS来控制div在视觉上隐藏，例如高度设为0、透明、溢出可视区等，还可以搭配CSS3的新属性来实现灵活多样的渐变动画效果，然后用JS来切换，例如：

.isHide height:0; overflow:hidden; opacity:0;

div.classList.add('isHide');  // div隐藏
div.classList.remove('isHide');  // div显示

还可以利用jQuery的hide()、show()、fadeIn、fadeOut、toggle等方法来实现类似效果。

参考技术A 最简单的方法，在div的style属性里面加上display:none;然后，如果需要显示就用element.show();隐藏就用 element.hide();

如何显示和隐藏在 vue js 中动态创建的 div（多格式选项卡结构）

【中文标题】如何显示和隐藏在 vue js 中动态创建的 div（多格式选项卡结构）

【英文标题】：How to show and hide divs (multiform tab structure) created dynamically in vue js

【发布时间】：2020-03-26 17:36:52

【问题描述】：

我正在尝试以编程方式使用 Vue.js 创建一个选项卡式结构。我认为它应该通过动态显示选定的 div 并隐藏其余部分来工作 还有其他有效的方法吗？

【问题讨论】：

vuejs.org/v2/guide/conditional.html

我可以有 100-1000 个 div 如何在所有这些中使用 v-if 或 v-else-if？

你当然可以有这么多，但很遗憾我们在你的问题中看不到任何内容

【参考方案1】：

您可以在 div 上使用 v-if 或 v-show，然后您可以让它接受一个评估动态数据的函数，如下所示：

<div v-for="item of items">
   <div v-if="shouldDisplay(item)">item</div>
</div>
...
methods: 
   shouldDisplay(item)
      if (item...) //fulfils some condition
           return true
        else 
       return false
    

根据@Phils 的建议，您还可以将数组创建为计算属性，过滤掉您需要的内容：

computed: 
   filteredArray()
     return items.filter(item => //some condition)
    

【讨论】：

从你的模板执行方法是非常低效的。见vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

@Phil 您在动态生成数据时别无选择，另一种选择是创建 100-1000 个计算属性也不是很高效。

或者只是一个返回过滤数组的计算属性

很大程度上依赖于数据结构，是可以做到的，我个人在模板迭代中放一个方法的时候从来没有发现有什么滞后。

我理解这个 shouldDisplay(item) 并且我的条件是 onclick，就像我们在 jquery 中做的那样如何在 vue 中做到这一点。

【参考方案2】：

我使用非常基本的 jquery 代码通过使用其唯一索引值调用函数并根据它们的 id 显示/隐藏它们来做到这一点：

   methods: 
        changeview(index)

            var id=Number(index)+Number(1);

            $( "#hotel"+id ).show();

            for( var i=0 ;i<this.location.length; i++)
                if(i!==id)

                    $( "#hotel"+i ).hide();
                
            
        ,