v-if 和 v-show的区别

v-if：

该指令用于条件性的渲染一块内容，当指令的表达式返回值为true的时候，内容会被渲染出来；如果条件一直为false，那么内容就一直不会被渲染。相反，当返回值为false的时候，内容会被销毁。

v-if可以和v-else、v-else-if搭配使用，使用方法就跟原生js上的用法基本一致。

在if 和 else的切换过程中，会复用已有的元素，而不是从头开始渲染。但是可以通过给元素添加key属性值，使每次切换都是重新渲染和销毁。

demo：

<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样式控制隐藏而已。

demo：

<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？

综合上述，可以看出，v-if在切换过程中会有更多性能上的花销；而v-show则在页面初次加载时就渲染完成，后期不会占用更多的性能花销。所以，如果需要频繁地切换，则使用v-show指令比较好。反之则使用v-if 比较好。