v-if：
该指令用于条件性的渲染一块内容，当指令的表达式返回值为true的时候，内容会被渲染进去；如果条件始终为false，那么内容就始终不会被渲染。相同，当返回值为false的时候，内容会被销毁。
v-if能够和v-else、v-else-if搭配应用，应用办法就跟原生js上的用法基本一致。
在if 和 else的切换过程中，会复用已有的元素，而不是从头开始渲染。然而能够通过给元素增加key属性值，使每次切换都是从新渲染和销毁。
dome:
<template> <div> <button @click="fun">click</button> <div v-if="pShow"> <label>UserName</label> <input type="text" placeholder="UserName"> </div> </div></template> <script> export default{ name: 'postimg', data () { return { pShow: false } }, methods:{ fun (){ this.pShow = !this.pShow; } },}</script>暗藏时，元素不存在于文档中
v-show：
该指令和v-if用法基本一致，指令表达式的值为true就显示，为false就暗藏。显示和暗藏是基于css的款式切换，相似于visibility属性。即便一开始条件为false，内容也会被渲染在文档中，只是由css款式管制暗藏而已。
<template> <div> <button @click="fun">click</button> <div v-show="pShow"> <label>UserName</label> <input type="text" placeholder="UserName"> </div> </div></template> <script>export default{ name: 'postimg', data () { return { pShow: false } }, methods:{ fun (){ this.pShow = !this.pShow; } },}</script>暗藏时，元素存在于文档中
区别：
v-if只有当指令的表达式返回值为true的时候才会被渲染，为false的时候，元素是不存在于文档中的；而v-show则不论指令表达式的返回值是什么，都会被渲染，并且只是基于css的款式切换，元素始终存在于文档中。
什么时候用v-if？什么时候用v-show？
1.v-if在条件切换时，会对标签进行适当的创立和销毁，而v-show则仅在初始化时加载一次，因而v-if的开销相对来说会比v-show大。
2.v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简略的CSS切换。