【javascript基础——系列10】js中隐藏元素的几种方法以及代码

系列文章

【javascript基础——系列1】前端页面ajax连接后台服务器传输数据

【javascript基础——系列2】前端页面axios连接后台服务器传输数据

【javascript基础——系列3】js中的事件的事件冒泡、事件捕获

【javascript基础——系列4】关于js的数据类型以及判别方法

【javascript基础——系列5】js的defer和async；parsesint；图片压缩

【javascript基础——系列6】常见的5种JS设计模式；发布订阅者模式

【javascript基础——系列7】变量提升函数提升；内存泄漏

【javascript基础——系列8】函数传参传递值还是引用；函数式编程

【javascript基础——系列9】函数防抖与节流

【javascript基础——系列10】js中隐藏元素的几种方法以及代码

【javascript基础——系列11】跨域存在的原因以及解决办法

---

---

一、直接隐藏

display和visibility的设置。

//css中

.test1{
display：none
}

或者是
.test{
visibility：hidden
}

---

二、表单元素隐藏

表单元素有：

• input
• select
• option
• textarea
• button
• datalist
• output
• keygen

//css中
<input type="hidden">xxxx<input>

---

三、图片类的尺寸设置隐藏

宽高设置为0

//css中
<style>

.img{
height:0;
width:0;
}

</style>

---

四、元素的透明度隐藏

设置元素的透明度将其进行隐藏

//css中

<style>

.test{
opacity:0;
background:transparent
}
</style>

---

五、元素的绝对位置

将元素设置为absolute后将元素放在屏幕之外

//css中

<style>

.test{
position:absolute;
margin:-10000px;
}
</style>

---

六、vue中的隐藏元素的两种方法对比

6.1 v-if

6.1.1 原理

• 通过控制vue虚拟dom上的节点来联动真实dom上的节点，从而控制元素的显示于隐藏。
  但虚拟dom上的节点被删除时，vue的相应系统会实时的删除对应的真实dom上的节点。

6.1.2 应用场景

• 此元素进入页面后，只会显示或者隐藏后不会被再次改变显示状态，此时用v-if更加合适，如请求后台接口后通过后台数据控制某块内容是否显示或隐藏，且这个数据在当前页面不会被更改，如登录页面的验证。

6.1.3 优点

• 当页面初次加载时为隐藏状态时，可以不用渲染此dom节点，提升页面加载速度。

---

6.2 v-show

6.2.1 原理

通过改变css样式中的display的样式为none实现元素的隐藏显示。

6.2.2 应用场景

但元素进入页面后会被频繁的改变显示状态，如一个按钮控制某块区域的显示。

6.2.3 优点

当v-if来隐藏元素时，只会在初次加载时渲染此dom节点，之后都是通过display来控制显隐，如果使用v-if时，会频繁操作dom，极大影响性能。

---

码字不易~， 各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~