Vue-条件渲染v-if与v-show
一、共同点
根据数据值来判断是否显示DOM元素
二、区别
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if与v-show</title>
<script src="src/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if='val'>v-if</p>
<p v-show='val'>v-show</p>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
val:false
}
});
</script>
</html>
浏览器解析结果：
<div id="app">
<!---->
<p style="display: none;">v-show</p>
</div>
1.手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
5.使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。
三、注意点
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="src/js/vue.min.js"></script>
<style>
p{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-show='val'>v-show</p>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
val:true
}
});
</script>
</html>
尽管val的值为true,但页面中仍然不显示p。如果v-show作用的元素，css文件中（或者在页面style里）display:none，通过v-show进行设置不能显示该元素。
原因：v-show控制显隐，是通过js代码去修改元素的element style，如果value为false，设置display: none;如果value为true，设置display: ''；于是value为true时，只能将element style中的display效果清除，并不能覆盖css中的display效果；
解决办法：使用v-show的话，在vue解析之前隐藏DOM的话，尽量在style属性里面设置display的值，不要在css文件中。
Vue-条件渲染v-if与v-show的更多相关文章
- Vue条件渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...
- Vue#条件渲染
根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...
- [vue]vue条件渲染v-if(template)和自定义指令directives
条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...
- vue 条件渲染与列表渲染
本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...
- (尚008)Vue条件渲染
1.test008.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- vue 条件渲染 v-if v-show
1.要点 1.1 v-if 条件性地渲染一块内容 <h1 v-if="awesome">Vue is awesome!</h1> 附带 / v- ...
- vue条件渲染2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 条件渲染v-if v-show
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 条件渲染方式
1.通过class绑定 <div :class="{'div-class': this.align == 'center'}"></div> 对应的css ...
- vue.js选择if（条件渲染）详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- Use Slim to overview model in Tensorflow like model.summary() in Keras
model.summary() in Tensorflow like Keras Use Slim Example: import numpy as np from tensorflow.python ...
- 测试思想-集成测试 关于接口测试 Part1
关于接口测试 by:授客 QQ:1033553122 接口定义 接口泛指实体把自己提供给外界的一种抽象化物,用以由内部操作分离出外部沟通方法,使其能被修改内部而不影响外界其他实体与其交互的方式. 举例 ...
- vue axios 发送post请求，后端接收参数为null
1首先检查自己的传参方式是否正确,我是传一个对象,没有问题,接口也触发了 2查了下资料说是 Content-Type的问题,设置为 'application/x-www-form-urlencod ...
- [20170627]使用TSPITR恢复表空间.txt
[20170627]使用TSPITR恢复表空间.txt --//RMAN提供了一种实现所谓TSPITR(Tablespace Point-In-Time Recovery)的技术,通过简单的一个语句, ...
- ASP.NET Boilerplate 学习
1.在http://www.aspnetboilerplate.com/Templates 网站下载ABP模版 2.解压后打开解决方案,解决方案目录: 3.在AbpTest.Web.Host项目的ap ...
- Java获取数据库表 字段 存储的部分数据
在浏览器页面,选中图片(可多选) >单击删除按钮. 重点是, 本数据库表TabHeBeiTianQi中 存在 同一id,对应的picLocalPath字段 存储了多张图片,图片地址用 逗号 ...
- .NET MVC 后台接受base64的上传图片
#region 配合前端的多张图片上传 #region 上传图片方法 /// <summary> /// 接口方法 /// </summary> /// <param n ...
- Linux 小知识翻译 - 「Linux的吉祥物企鹅叫什么名字？」
这次说说Linux的吉祥物 *企鹅* 都知道Linux的吉祥物是企鹅,但是这个企鹅叫什么名字呢? 它的名字就是「Tux」,注意可不是「Tax」(税收). 具体参考 wiki:中文解释 英文的解释更为 ...
- Eclipse中定位当前文件在项目中的位置
点击红色框内的按钮,就能定位当前文件在项目中的位置, 另外, 找到位置后记得再点击一下这个按钮, 要不然每次打开一个文件都会自动定位
- Python3编写网络爬虫08-数据存储方式一-文件存储
数据存储 用解析器解析出数据之后,就是存储数据了.保存的形式可以多种多样,最简单的形式是直接保存为文本文件,如TXT JSON CSV等.另外还可以保存到数据库中,如关系型数据库MySQL 非关系型数 ...