Vue.js中v-if&&v-show的使用

前言

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）
相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

---

下面是我写的较为简单的案列

1.v-if

代码如下（示例）：

 	<div id="d1">
        <button @click="changeShow">显示图片</button>
	        <div v-if = "isShow">
	            <img src="./img/艾斯1.jpg" />
	        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#d1",
            data:{
                isShow:true
            },
            methods:{
                changeShow(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

打开页面找到我们的控制台，在里面可以看到当我们点击按钮的时候我们的div v-if = "isShow"才会出现，在图片不显示的时侯，div块是不存在的。

2.v-show

代码如下（示例）：

 	<div id="d1">
        <button @click="changeShow">显示图片</button>
	        <div v-show = "isShow">
	            <img src="./img/艾斯1.jpg" />
	        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#d1",
            data:{
                isShow:true
            },
            methods:{
                changeShow(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

这段代码与上面的代码只有一处不同，但是有着本质上的区别。
在控制台里可以看到在图片不显示的时候div块也是存在的，只是其style属性为display：none。

总结

v-if和v-show是针对我们不同的需求情况下使用的，倘若我们事先需要加载大量图片，v-show是我们的最佳选择，因为一开始v-show就已经将我们的图片加载好，只是隐藏它。而v-if是我们什么时候需要它才开始加载，所以如果我们需要大量图片，那有可能会造成显示的卡顿。

今天想要分享的也就只有这些，希望我的理解可以帮助到刚开始学习Vue.js的各位博友。