面试题1.v-if和v-show的区别?
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-show="isShow">我是p </p>
<p v-if="isShow">我是p </p>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
// isShow:false
isShow:true
}
})
看结果:
<1>:先说相同点:
v-show和v-if都是控制dom元素的显示和隐藏的。
<2>:不同点:
1.原理:v-show是通过控制元素的样式属性display的值,来完成显示和隐藏的。
v-if是通过dom元素的添加和删除,完成显示和隐藏。
2.使用场景:由原理(做法)得出使用场景的区别
v-show:使用在dom元素频繁切换的场景。
v-if:当dom元素切换不频繁,可以使用,特别是,首次元素处于隐藏的情况下。
拓展:
v-show:显示隐藏 display:‘none’ v-if:visibility:‘hidden’
display:'none’和visibility:'hidden’的区别?
1.display:'none’是彻底消失,不在文档流中占位,浏览器也不会解析该文件。
visibility:'hidden’是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位浏览器会解析该文件。
2.使用visibility:'hidden’要比display:'none’性能上要好,
display:'none’切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸,布局,显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产成一次回流,)而visibility切换是否显示时则不会引起回流。
好了,本次就到这里了,喜欢我记得留下小爱心加关注哦!