Vue中的条件渲染

最新推荐文章于 2024-03-12 08:27:32 发布

sustecher_NaCl

最新推荐文章于 2024-03-12 08:27:32 发布

阅读量308

点赞数 2

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

本文链接：https://blog.csdn.net/NaCl_/article/details/115107601

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

面试中被问了 v-if 和 v-show 的区别，现场答得不是很好，重新总结一下

v-if

<body>
    <div id="app">
        <div v-if="judge"><p>v-if</p></div>
        <button @click="pChange">Change</button>
    </div>
</body>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            judge:true,
        },
        methods:{
            pChange(){
                this.judge=(this.judge==true?false:true);
            }
        }
    })
</script>

用chrome浏览器的开发者模式，发现当 v-if 绑定值为 true 时，该条件块被渲染
在这里插入图片描述

当单击Change按钮，使绑定值更改为false后，该条件块不被渲染出来
在这里插入图片描述
v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。

总结，使用 v-if，内容只会在指令的表达式返回 true 值的时候被渲染。

v-else-if，v-else

<body>
    <div id="app">
        <div v-if="type === 'A'"> A </div>
        <div v-else-if="type === 'B'"> B </div>
        <div v-else-if="type === 'C'"> C </div>
        <div v-else> Not A/B/C </div>
    </div>
</body>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            type:'D',
        },
    })
</script>

v-else-if，充当 v-if 的 else-if 块，可以连续使用;
v-else，v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show

<body>
    <div id="app">
        <div v-show="judge"><p>v-show</p></div>
    </div>
</body>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            judge:true,
        },
    })
</script>

用法和 v-if 基本一致

同样地，用chrome浏览器的开发者模式，发现当 v-show 绑定值为 true 时，条件块被渲染
在这里插入图片描述
而当 v-show 绑定值为false时，条件块同样也被渲染，只是切换了属性 display: none

v-show 的元素始终会被渲染并保留在 DOM 中，只是简单地切换元素的属性

总结

v-if 是真正意义上的条件渲染，确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 则简单许多，元素始终会被渲染，只是基于CSS切换

故一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

sustecher_NaCl

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
Vue中的条件渲染

v-if<body> <div id="app"> <div v-if="judge"><p>v-if</p></div> <button @click="pChange">Change</button> </div></body><script> var vm = new Vue({ el:"#a
复制链接

扫一扫

专栏目录