16 v-if 和 v-show 的区别

Posted 2021-12-24 wgchen~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了16 v-if 和 v-show 的区别相关的知识，希望对你有一定的参考价值。

[基础]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 就看不到了。

<!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>