首页 > 其他分享 >16 v-if 和 v-show 的区别

16 v-if 和 v-show 的区别

时间:2023-02-09 11:33:58浏览次数:39  
标签:willem DOM const 区别 app 16 show data


[基础]v-show和v-if的区别

  • ​​场景​​
  • ​​v-show 的基本语法​​
  • ​​v-if 和 v-show 的区别​​

场景

在第11节中,我们学习了 ​​v-if​​ 和三元运算符,我相信小伙伴已经掌握的很好了。

这篇文章我们学一个和 ​​v-if​​​ 很类似的语法 ​​v-show​​​,以及它和 ​​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">
<title>demo</title>
<script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app=Vue.createApp({
data(){
return{

}
},
template:`
<h2>willem</h2>
`
})
const vm=app.mount("#app")
</script>
</html>

准备好最基本的结构后,在数据项中声明一个 ​​show​​ 的变量。

data(){
return{
show:true,
}
},

有了变量后,可以在模板中使用 ​​v-show​​ 来控制CSS样式,从而控制DOM元素的展示与否。

template:`
<h2 v-show="show">willem</h2>
`

这时候打开浏览器进行预览,是可以看到 willem 这个h2的DOM元素的。
如果把数据项 ​​​show​​​ 改成 ​​false​​ 就看不到了。

16 v-if 和 v-show 的区别_http

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app=Vue.createApp({
data(){
return{
show:true,
}
},
template:`
<h2 v-show="show">willem</h2>
`
});

const vm=app.mount("#app");
</script>
</html>

v-if 和 v-show 的区别

v-show 看起来和 v-if 语法的功能基本一样,但其实他们无论是灵活性还是功能都是有区别的。

v-if 更加灵活,可以增加多个判断,比如 v-else-iif 和 else,而 v-show 不具备这样的灵活性。

v-show 控制DOM元素显示,其实控制的是css样式,也就是display:none。
现在你可以把data的值修改为false,然后刷新浏览器,打开浏览器调试器的Elements选项卡,就可以清楚的看到,这时候​​​<h2>​​标签上的style样式就是display:none。

<h2 style="display: none;">willem</h2>

现在回到 vscode 中的代码,在模板中再复制一行(在 vscode 中用 ​​Alt+Shift+↓​​就可以快速复制一行),这时候用 v-if 进行判断。

再次在浏览器中预览,你会发现整个DOM元素都不见了。

现在你应该明白了v-if 和v-show的区别,那如何使用他们呢?
这个就要看具体的需求了,如果显示和隐藏的状态切换比较频繁,并且没有什么多余复杂的业务逻辑,建议使用v-show,因为它不会一直渲染你的页面DOM元素,这或多或少对性能和稳定性有点提升,反之可以使用 ​​​v-if​​。


标签:willem,DOM,const,区别,app,16,show,data
From: https://blog.51cto.com/u_13571520/6046468

相关文章

  • RPC调用和HTTP调用的区别
    很长时间以来都没有怎么好好搞清楚RPC(即RemoteProcedureCall,远程过程调用)和HTTP调用的区别,不都是写一个服务然后在客户端调用么?这里请允许我迷之一笑~Naive!本文简单地......
  • JavaScript undefined 与 null 的区别
    阅读目录阐述一、相似性二、历史原因三、最初设计四、目前的用法null表示"没有对象",即该处不应该有值。典型用法是:undefined表示"缺少值",就是此处应该有一......
  • .Net中,栈和堆的区别(转)
    栈负责保存我们的代码执行(或调用)路径,而堆则负责保存对象(或者说数据,接下来将谈到很多关于堆的问题)的路径。可以将栈想象成一堆从顶向下堆叠的盒子。当每调用一次方法时,我......
  • MDS55-16-ASEMI电机专用模块MDS55-16
    编辑:llMDS55-16-ASEMI电机专用模块MDS55-16型号:MDS55-16品牌:ASEMI封装:MDS正向电流:55A反向电压:1600V引脚数量:5芯片个数:6芯片尺寸:MIL漏电流:>10ua恢复时间:>500ns浪涌电流:1200A......
  • MDQ60-16-ASEMI工业电机模块MDQ60-16
    编辑:llMDQ60-16-ASEMI工业电机模块MDQ60-16型号:MDQ60-16品牌:ASEMI封装:MDQ特性:整流模块正向电流:60A反向耐压:1600V恢复时间:>500ns引脚数量:4芯片个数:4芯片尺寸:MIL......
  • 7.两个排序链表的交点(Leetcode 160)
    7.两个排序链表的交点(Leetcode160)方法一:#include<stdio.h>structListNode{ intval; ListNode*next; ListNode(intx):val(x),next(NULL){}};#include......
  • foobar2000 v1.6.16 汉化版
    foobar2000v1.6.16汉化版-----------------------【软件截图】----------------------     -----------------------【软件介绍】----------------------fo......
  • 算法16:归并排序_相关面试题 (超难)
    归并排序(MergeSort)就是利用归并的思想实现排序方法。它的原理是假设初始序列含义n个记录,则可以看成是n个有序子序列,每个序列的长度为1,然后两两归并,得到【n/2】([x]表示不......
  • Hive分区和分桶的区别
    1.前言Hive的分区和分桶都是细化数据管理,加快数据查询和分析,两者有什么区别呢?下面讲解一下分区和分桶的原理。2.分区(1)分区原理Hive的分区表可以有一个或多个分区键,用于确......
  • cocos2dx-3.16截屏遇坑
    clippingNode用到模板就是这个东西 截屏的内容如果有clippingNode就会背景白屏是个什么感觉。。试一试就知道了。解决方案 RenderTexture::create(visibleSize.width,......