v-if和v-show区别
v-if初始花销小,但频繁切换的话消耗资源,v-show初始花销大,频繁切换如轮播图的时候可以使用v-show。个人理解就是v-show一开始就花很多资源渲染到页面上,所以前期花费资源比较大,动态切换的时候就不会继续渲染一次,v-if在动态频繁切换的时候会一次又一次的渲染占用资源。
在页面中的区别
下面代码是实现一个点击按钮,用v-if和v-show切换一段文字
<div id="app">
{{ flag }}
<hr>
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">哈哈哈</h3>
<h6 v-show="flag">12345</h6>
<!-- v-if 和 v-show 只有一个作用,就是根据指定的标识符,切换元素的显示和隐藏状态 -->
<!-- v-if 是实时的创建或移除元素,从而达到元素的显示和隐藏 -->
<!-- v-show 是通过为元素 添加或移除 display:none 来实现 隐藏 和 显示的 -->
<!-- 如果 元素 需要经常的切换显示和隐藏的状态,此时,使用 v-show 更合适一些; -->
<!-- 如果元素 被创建出来之后,可能不会进行状态的切换,此时,适合使用 v-if -->
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {
/* toggle() {
this.flag = !this.flag
} */
}
});
</script>
切换前页面渲染出的代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gbfok7ut-1604388845701)(2020-09-21-22-09-46.png)]
切换后的代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ePO1ViVQ-1604388845705)(2020-09-21-22-20-45.png)]
哈哈哈是用v-if切换的,12345是用v-show。当点击按钮切换时候,v-if是真正的切换-它每次都将哈哈哈渲染到页面或者取消。而v-show则是简单的加入了css样式display去隐藏12345这个标签。所以每次切换v-if消耗的资源大,v-show第一次渲染到页面消耗的资源大。v-show适合做比如轮播图,
- v-show官方说明:* v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display;
- 大白话就是v-show会被渲染(会像后台请求相对应的数据)但是不会被展示,在dom树中可以找到相对于的dom节点。