16 v-if 和 v-show 的区别

场景

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

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

v-show 的基本语法

DOCTYPE html>


    
    
    demo
    


    


    const app=Vue.createApp({ 
    data(){
        return{

        }
    },
    template:`
        willem  
        ` 
    }) 
    const vm=app.mount("#app")

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

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

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

template:`
    willem  
`

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

DOCTYPE html>


    
    
    demo
    


    


const app=Vue.createApp({ 
            data(){
                return{
                    show:true,
                }
            },
            template:`
                willem  
            `
        });

const vm=app.mount("#app");

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选项卡，就可以清楚的看到，这时候标签上的style样式就是display:none。

willem

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

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

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