VUE 条件渲染 v-if、v-show
VUE 条件渲染 v-if、v-show
条件指令
- v-if 是否渲染当前元素
- v-else
- v-else-if
- v-show：与 v-if 类似，只是元素始终被渲染并保留在DOM中，只是简单的切换CSS属性display来显示或者隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-条件渲染</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<h3>v-if 条件渲染</h3>
<input v-model="seen" type="checkbox" >勾选后显示红色小块
<div v-if="seen" class="box"></div>
<p v-else="seen">红色小块隐藏了...</p>
<hr>
<h3>v-show 条件渲染</h3>
<div v-show="seen" class="box"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
seen:false
}
})
</script>
</body>
</html>
v-if 和 v-show的比较
-
什么时候元素被渲染：
- v-if 如果在初始条件为假，则什么也不做，每当条件为真时，都会重新渲染条件元素。
- v-show 不管初始条件是什么，元素总是被渲染，并且只是简单的基于CSS样式进行切换。 -
使用场景选择：
- v-if 有更高的切换开销
- v-show 有更高的渲染开销
因此，如果需要非常频繁的切换，则使用 v-show 比较好，如果在运行后，条件很少改变，则使用 v-if 比较好。
【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！
【重要说明】博文仅作为本人的学习记录，论点和观点仅代表个人而不代表技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V ：https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录，论点和观点仅代表个人而不代表技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V ：https://gitee.com/wjw1014
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
2018-07-27 Arduino使用HC05蓝牙模块与手机连接