vue中的v-if和v-show的區別

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切換。