控制DOM元素显示与隐藏的方式

• 通过CSS样式来控制
• • 修改style的visibility
  • 修改style的display
• Vue中控制的方式
• • v-show
  • v-if

通过CSS样式来控制

修改style的visibility

这种方式虽然元素在页面上隐藏了，页面的位置还被控件占用，显示空白

document.getElementById("EleId").style.visibility="hidden";

document.getElementById("EleId").style.visibility="visible";

修改style的display

利用上述方法实现隐藏后，页面的位置不被占用

document.getElementById("EleId").style.display="none";

document.getElementById(“EleId”).style.display=“inline”;

Vue中控制的方式

v-show

实现的原理：给DOM元素绑定一个isShown的条件，如果isShown为true，则该元素将显示出来；如果isShown为false，则该元素被隐藏
适用场景：需要频繁切换元素显示状态的场景，因为它不会频繁操作DOM

v-if

实现的原理：直接对DOM元素进行渲染或者销毁
适用场景：页面每次创建的时候会重新创建或者销毁DOM节点，导致组件的重新加载。对于一些比较复杂的组件，可能会带来性能问题。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！