Vue条件渲染指令 v-if 和 v-show

最新推荐文章于 2024-07-19 10:04:44 发布

Clickkkkk

最新推荐文章于 2024-07-19 10:04:44 发布

阅读量257

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qiutian24/article/details/108918995

版权

本文详细介绍了Vue中的条件渲染指令v-if和v-show，包括它们的用法、区别以及在不同场景下的最佳实践。v-if具有更高的切换开销，适用于条件不常改变的情况，而v-show则适用于频繁切换的场景，它通过切换display属性控制显示。

摘要由CSDN通过智能技术生成

v-if

v-else

v-else-if

v-show

条件渲染，即根据一定的条件来判断是否渲染当前页面。

1.v-if

<div id="app">
    <p v-if="isShow">v-if,isShow为true时</p>
</div>
<script>
    const app=new Vue({
    
        el:'#app',  //用于管理要挂载的数据
        data:{
         //定义数据
            isShow:true
        }
    });
</script>