16 v-if 和 v-show 的区别

偏执的太偏执、 2023-10-06 20:28 17阅读 0赞

#### \[基础\]v-show和v-if的区别 ####

*  场景
 *  v-show 的基本语法
 *  v-if 和 v-show 的区别

## 场景 ##

在第11节中，我们学习了 `v-if` 和三元运算符，我相信小伙伴已经掌握的很好了。

这篇文章我们学一个和 `v-if` 很类似的语法 `v-show`，以及它和 `v-if` 有什么区别，也算是一个补充课程。

## v-show 的基本语法 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</title>
        <script src="https://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app=Vue.createApp({
           
        data(){
          
            return{
          
    
            }
        },
        template:`
            <h2>willem</h2>  
            ` 
        }) 
        const vm=app.mount("#app")
    </script>
    </html>

准备好最基本的结构后，在数据项中声明一个 `show` 的变量。

data(){
        return{
            show:true,
        }
    },

有了变量后，可以在模板中使用 `v-show` 来控制CSS样式，从而控制DOM元素的展示与否。

template:`
        <h2 v-show="show">willem</h2>  
    `

这时候打开浏览器进行预览，是可以看到 willem 这个h2的DOM元素的。  
如果把数据项 `show` 改成 `false` 就看不到了。

![在这里插入图片描述][aa7d02e5b9764c76989faf1d0a7e6dee.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</title>
        <script src="https://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
    const app=Vue.createApp({
           
                data(){
          
                    return{
          
                        show:true,
                    }
                },
                template:`
                    <h2 v-show="show">willem</h2>  
                `
            });
    
    const vm=app.mount("#app");
    </script>
    </html>

## v-if 和 v-show 的区别 ##

v-show 看起来和 v-if 语法的功能基本一样，但其实他们无论是灵活性还是功能都是有区别的。

v-if 更加灵活，可以增加多个判断，比如 v-else-iif 和 else，而 v-show 不具备这样的灵活性。

v-show 控制DOM元素显示，其实控制的是css样式，也就是display:none。  
现在你可以把data的值修改为false，然后刷新浏览器，打开浏览器调试器的Elements选项卡，就可以清楚的看到，这时候`<h2>`标签上的style样式就是display:none。

<h2 style="display: none;">willem</h2>

现在回到 vscode 中的代码，在模板中再复制一行(在 vscode 中用 `Alt+Shift+↓`就可以快速复制一行)，这时候用 v-if 进行判断。

再次在浏览器中预览，你会发现整个DOM元素都不见了。

现在你应该明白了v-if 和v-show的区别，那如何使用他们呢？  
这个就要看具体的需求了，如果显示和隐藏的状态切换比较频繁，并且没有什么多余复杂的业务逻辑，建议使用v-show，因为它不会一直渲染你的页面DOM元素，这或多或少对性能和稳定性有点提升，反之可以使用 `v-if`。

[aa7d02e5b9764c76989faf1d0a7e6dee.gif_pic_center]: https://img-blog.csdnimg.cn/aa7d02e5b9764c76989faf1d0a7e6dee.gif#pic_center