关于javascript:vue中的vif和vshow的区别

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