区别1:(展示方面)
v-if
- 个人理解:满足v-if条件就生成dom元素,不满足就不生成dom元素。
- 换句话说: 就是v-if通过控制dom元素的存在与否来控制元素的显示和隐藏
v-show
- 个人理解:其实就是控制dom元素的css样式,满足v-show就显示,不满足就不显示
- 换句话说:是通过设置DOM元素的css样式,display: block为显示,display: none为隐藏;
下面用代码具体展示验证上面所说的
<template>
<div class="wrap">
<p v-if="isOk">v-if1: 天上有一个太阳/p>
<p v-if="isTrue">v-if2: 天上有两个太阳2</p>
<p v-show="isOk">v-show3: 天上有一个太阳3</p>
<p v-show="isTrue">v-show4: 天上有两个太阳4</p>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data () {
return {
isOk: true,
isTrue: false,
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
padding:0;
margin:0;
}
html,body{
width:100%;
height:100%;
}
</style>
上面的代码中有两个v-if和v-show,很显然根据变量isOk可以知道1和3是符合显示条件的,2和4不符合显示条件,但是看html中的dom结构,可以看出,v-if不成立的2,根本就不存在dom节点中,而v-show中不成立的4, 是存在dom中,但是css设置为display:none
页面展示结果如下:
区别2: (渲染条件)
- v-if 是条件渲染,只有在条件第一次变为真时才开始局部编译,编译的内容被缓存,缓存后,在切换的时候进行卸载或者加载, 如果判断条件为假的时候,就什么都不做(惰性)
- v-show 是不管初始条件是什么,始终会被渲染并保留在 DOM 中。所以如果需要非常频繁地切换,使用 v-show 较好,只改变css,不操作dom
区别3: (应用场景)
官网上说:v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销
- 所以如果在运行时条件很少改变,则使用 v-if 较好。
- 如果需要非常频繁地切换,则使用 v-show 较好,只改变css。