编程知识 cdmana.com

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

版权声明
本文为[lucky_qi]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000038641354

Scroll to Top