摘要：
　　上篇文章介绍了Vue.js中的v-if失效的原因及三种解决方法，今天我们接着讲下v-show的用法以及解决问题的第四种方法......

一、回顾

在前日凌晨的文章中，艺灵分享了关于v-if切换时失效的原因的3种解决的方法，今天我们继续文章中提到的v-show来做一个小案例。对于上篇文章，需要回顾的看官可以点我看详情，此处顺便附上3种方法的demo案例， 点我看demo

二、v-show用法

v-show的用法与前面的v-if类似，用上次的代码，直接将if修改成show即可。

下面我们开始做一个实例了，这个实例的效果看官应该都见过，就是：点击一个按钮时，切换一个元素的显示或隐藏状态。

如果看官还没有掌握上篇文章中的v-if用法的话，建议不要往下看了哦~

三、v-show实例

先来实现静态的html代码。

3.1、html代码

<div id="app">
　<p v-show="ok">v-show可以控制元素的显隐状态，点击下面的按钮可看到效果。</p>
　<button v-on:click='Toggle()'>Toggle</button>
　<p>ok：{{ok}}</p>
</div>

注意上面黄色高亮部分，第一处就是一个v-show语法，第二处是添加一个自定义事件，下面开始js代码

3.2、js代码

<script src="http://unpkg.com/vue@2.1.10/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
　var vm=new Vue({
　　el:'#app'
　　,data:{
　　　ok:true
　　}
　　,methods:{
　　　Toggle:function(){
　　　　this.ok=!this.ok;
　　　}
　　}
　})
</script>

为了让看官能看到效果，需要体验的看官可以点我去体验下demo。

现在看官点击demo页面中的Toggle按钮，就可以切换文字的显隐状态了。注意上面js代码中黄色高亮的部分，这个在上篇文章中没有出现过，看官可以当成是第四种方法。

四、v-if和v-show的区别

今天我们实践了一下这个v-show，表面上实现了跟上次v-if一样的效果，但实质上，这两个还是有所区别的。

下面的解释来自Vue官方。
详情地址：http://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

v-if是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用v-show较好，如果在运行时条件不大可能改变则使用v-if较好。

为了更好的理解，看官可以打开上篇文章中的例子和本文的例子，然后在打开浏览器的控制台，点击按钮时看下两个例子中的html源码发生的变化。配图一张：

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2017-02-20/482.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。