vue v-show 和v-if 的功能不是一样的嘛？

jinzunqinjiu
148 阅读2分钟

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

v-show 和 v-if的功能

当使用Vue.js开发Web应用时，我们常常需要根据特定条件来控制页面元素的显示和隐藏。Vue.js提供了两个常用的指令，v-show和v-if，用于实现这一功能。在这篇文章中，我们将探讨如何使用这两个指令来创建动态显示的标题。

Vue.js中的条件渲染

在Vue.js中，条件渲染是一种根据特定条件在页面上显示或隐藏元素的技术。这对于创建响应式和交互性强的用户界面至关重要。

v-show指令

v-show是Vue.js提供的一种条件渲染方式。与常规的CSS样式控制不同，v-show实际上是通过修改元素的display属性来实现显示和隐藏。 如下面的demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 id="app"></h1>
    <template id="my-id">
        <h2 @click="hide" v-show="l">{{l}}</h2>
    </template>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
        const app = Vue.createApp({
            template: '#my-id',

            data() {
                return {
                    time: '2023-12-08',
                    time2: '2023年 12月 08号',
                    time3: '2023/12/08',
                    status: 1,
                    l:'show'
                }

            },
            methods: {
                change() {
                    if(this.status===3){
                        this.statu=0
                    }
                    this.status++
                },
                hide(){
                    this.l=false
                }
            }
        })
        app.mount('#app')
    </script>
</body>
</html>

上面的小demo实现了一个点击则隐藏，通过v-show来实现这个效果

image.png

点击这个show后就会隐藏

image.png

空空如也了

再看一下它的dom结构

image.png

可以看到它的demo结构还在，但是样式为display：none，这就是v-show进行隐藏的原理

v-if指令

还是上面的代码，唯一的区别就是将show，改成if，会有什么效果呢？ 直接展示

image.png

还是一样的点击隐藏 image.png

但是！！！我们检查一下，发现它的dom结构直接没了。

image.png

总结

v-show和v-if是Vue.js中用于条件渲染的两个常见指令。它们分别适用于不同的使用场景，具体选择取决于开发者的需求。使用这两个指令，我们可以轻松地实现页面元素的动态显示和隐藏，从而提升用户体验和交互性。在实际开发中，根据具体情况选择合适的条件渲染方式，是Vue.js开发中的一项重要技能。

avatar
文章
阅读
粉丝