如何使用js动态显示或隐藏DIV
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用js动态显示或隐藏DIV相关的知识,希望对你有一定的参考价值。
方法很多,最直观的就是用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等方法来实现类似效果。
如何显示和隐藏在 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();
,
【讨论】:
以上是关于如何使用js动态显示或隐藏DIV的主要内容,如果未能解决你的问题,请参考以下文章
js设置DIV显示时间并动态显示时间倒计时多少秒,倒计时完了之后该层自动隐藏。