Vue基础之v-if与v-show

Show Time!

 

---

 

说再多不如直接上效果：

（一）v-if

　　<div id="app">
　　　　<div v-if="flag" class="box one">吃晚饭</div>
　　　　<div v-else class="box two">不吃晚饭</div>
　　　　<button @click="flag=!flag">切换条件</button>
　　</div>

　　<script src="js/vue.js"></script>
　　<script>
　　　　const app = Vue.createApp({
　　　　　　data() {
　　　　　　　　return {
　　　　　　　　　　flag: true
　　　　　　　　}
　　　　　　},
　　　　}).mount("#app")
　　</script>

由上图可以得出，v-if是在DOM层面控制元素的显示隐藏，当条件不成立时，元素就不存在，当条件成立时元素才会出现。

v-if是真正的条件渲染，因为会确保切换过程中条件块内的事件监听器和子组件适当的被销毁和重建，在DOM层面销毁和创建

 

---

 

（二）v-show

 

v-show是通过css控制显示与隐藏，当条件不成立时，元素上面会加入一个style="display:none;"来隐藏元素；不管初始条件是什么，元素总会被渲染，并且只是简单地基于CSS进行切换，在CSS层面控制。

　　<div id="app">
　　　　<div class="box one" v-show="flag">大大怪将军</div>
　　　　<div class="box two" v-show="!flag">小小怪下士</div>
　　</div>

　　<script src="js/vue.js"></script>
　　<script>
　　　　const app = Vue.createApp({
　　　　　　data() {
　　　　　　　　return {
　　　　　　　　　　flag: true
　　　　　　　　}
　　　　　　},
　　　　}).mount("#app")
　　</script>

 

通俗来讲，无论初始条件是什么，元素总是会存在于解析出来的HTML代码当中，而v-if只有在条件成立的时候，元素才会在于解析出来的HTML代码中出现。

 

---

 

使用场景

1.如果想要缓存组件上的一些内容，如缓存输入框内容，可以选择使用v-show；

2.如果会频繁切换组件，使用v-show更好，减少Dom的渲染。