16.VUE学习之-v-show的使用与v-if的差异对比
2024-09-01 22:31:07
v-show的使用与v-if的差异对比
相同点:
都可以达到隐藏和显示的效果.
不同点:
v-show
会用display:none 来隐藏元素节点,推荐使用这种方式v-if
会移除节点,可以配合v-else-if
和v-else
使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="vue">
<h2 v-if="status">显示一</h2>
<h3 v-else>显示二</h3>
<span v-show="status">显示三</span>
<br>
<input v-model="status" type="checkbox">
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#vue",
data:{
status:true,
}
});
</script>
</html>
效果:
最新文章
- X Window 的奥秘
- 【Win 10 应用开发】分析 URI 中的查询字符串
- 谈谈GIS与地理学语言
- Tomcat部署的时候 unpackWARs=";true";
- 统计map上的read数量
- UI学习笔记---第四天
- opengl截图
- springmvc 精华
- 跨终端Web之Hybrid App
- 关于HTML5中的sessionStorage和localStorage
- python之字符串及其方法---整理集
- Flask图书管管理表
- Linux学习--- 宏定义下#、##的使用
- MATLAB的两种移位运算
- cuteftp9破解及安装、使用
- 最大的矩形面积 Maximal Rectangle
- MySQL基础之 AND和OR运算符
- excel查找和替换
- Javascript 初学笔记
- hibernate 中集合的保存
热门文章
- Android子线程更新UI成功
- Dede友情链接和分页列表和内容分页去掉小圆点LI标签
- Cucumber 场景大纲 Scenario Outlines
- Asp.net中的ViewState用法
- 斗鱼扩展--拦截替换js_辅助抢宝箱(六)
- 操作文件方法简单总结(File,Directory,StreamReader,StreamWrite )(转载)
- css清除浮动好方法
- Android stutdio2.2 启动模拟器出现“/dev/kvm is not found.”解决方法
- 【C++函数重载】求3个数中最大的数(分别考虑整数、双精度数、长整数的情况)。
- 报错:LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏