面试题1.v-if和v-show的区别？

最新推荐文章于 2022-05-23 20:40:43 发布

梦大

最新推荐文章于 2022-05-23 20:40:43 发布

阅读量271

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/momodada111/article/details/107501236

版权

本文探讨了Vue中v-if和v-show指令的区别，包括它们的工作原理和适用场景。v-if通过DOM元素的增减控制显示，适合不频繁切换的情况，而v-show通过切换display样式实现显示隐藏，适用于频繁切换。此外，文章还提到了display:none与visibility:hidden在性能上的差异，display:none会导致回流，而visibility:hidden则不会。

摘要由CSDN通过智能技术生成

面试题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切换是否显示时则不会引起回流。
好了，本次就到这里了，喜欢我记得留下小爱心加关注哦！

梦大

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题1.v-if和v-show的区别？

面试题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
复制链接

扫一扫