<div id="app">
<div v-show="c4">c4</div>
</div>
......
var app = new Vue({
el: '#app',
data: {
c4: false
}
});当 v-show 绑定的值为真值的时候，节点正常渲染；当为假值的时候，节点仍旧渲染，但是添加了 style=”display:none;”，将节点通过 CSS 的方式隐藏。渲染结果如下：
<div id="app">
<div style="display: none;">c4</div>
</div>相比于 v-if，v-show 其实不管在什么条件下，一开始都会进行节点的渲染，而后续的状态切换都是基于 CSS 实现的。针对状态需要频繁切换状态的节点，v-show 相对于直接修改 DOM 节点的 v-if 有更好的性能。
然而，v-show 的缺点也是显而易见的，不管初始条件如何，它都将进行 DOM 节点的渲染，这对首屏加载优化不一定是个好事情。
（2）key
在使用 v-if 等指令的时候，vue 会尽可能地复用已经渲染的元素，而不是全部地重头渲染。例如一对绑定 v-if 与 v-else 的元素，如果二者内部 DOM 元素相同，则可能在所绑定数据改变时，只更新绑定了的属性，其它通过用户操作或者 JS 修改了的属性将被保留。
<div id="app">
<form>
<div class="input-group" v-if="name">
<label for="name">name:</label>
<input type="text" name="name" placeholder="user name" />
</div> <div class="input-group" v-else>
<label for="email">email:</label>
<input type="text" name="email" placeholder="email" />
</div>
<button v-on:click.prevent="toggle">toggle</button>
</form>
</div>
......
var app = new Vue({
el: '#app',
data: {
name: true
},
methods: {
toggle: function () {
this.name = ! this.name;
}
}
});
这里就是如此，点击 toggle 按钮的时候，v-if 所绑定的值会切换，相应的，DOM 节点也会跟着切换，但是实际上，由于 vue 重用了 input 元素，切换的同时，用户填写的内容并没有被清空。同理，label 元素在切换的工程中，其实也只是修改了 for 属性和元素内的文字，并没有销毁原有 DOM 节点和生成新的 DOM节点。
但是 vue 做的这种优化并不总是为人们所需要的，不需要它的时候，我们为这个元素添加一个唯一的 key 值就可以了。
<div id="app">
<form>
<div class="input-group" v-if="name">
<label for="name">name:</label>
<input type="text" name="name" placeholder="user name" key="name" />
