vue中v-if和v-show的区别

拼搏现实的明天。 2022-02-04 09:27 59阅读 0赞

##### 一、v-if、v-show区别 #####

1.  v-if、v-show都是用来控制元素的显示与隐藏
2.  v-if控制dom节点，v-if为false时移除元素
3.  v-show修改元素的display属性，v-show为false时隐藏元素

##### 二、v-if 实例 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-if</title>
        
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
    <div id="myif">
        <p v-if="show">v-if</p>
        <button @click="changeshow">toggle</button>
    </div>
    <script>
        new Vue({
            el:"#myif",
            data:{
                show:true
            },
            methods:{
                changeshow:function () {
                    this.show=!this.show
                }
            }
    
        })
    </script>
    </body>
    </html>

**运行结果：**  
![在这里插入图片描述][20190507180335663.png]  
**点击toggle隐藏段落，段落会从dom中移除**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70]

##### 三、v-show实例 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-show</title>
        
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
    <div id="myif">
        <p v-show="show">v-show</p>
        <button @click="changeshow">toggle</button>
    </div>
    <script>
        new Vue({
            el:"#myif",
            data:{
                show:true
            },
            methods:{
                changeshow:function () {
                    this.show=!this.show
                }
            }
    
        })
    </script>
    </body>
    </html>

**运行结果：**  
![在这里插入图片描述][2019050718051882.png]  
**点击toggle隐藏段落，段落会隐藏，段落在dom中还存在**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 1]

[20190507180335663.png]: /images/20220204/b7ca427800db4bdd9232a43383caa2b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70]: /images/20220204/19d2d1f1fc01464d9ec0cd02ac667001.png
[2019050718051882.png]: /images/20220204/bc50fc225f8b46bca6646483527210f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 1]: /images/20220204/09795a3887de49dea354dfc6b78561cc.png