Vue入门指南——分支结构

╰+攻爆jí腚メ 2023-07-01 14:54 13阅读 0赞

### 目录： ###

*  一、v-if
 *  二、v-else-if & v-else
 *  三、v-show
 *  四、v-show 和 v-if的区别
 *  五、总结

# 一、v-if #

`v-if` 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

<div id="app">
            
            <span v-if="flag">
               如果flag为true则显示,false不显示!
            </span>
    </div>
    
    <script>
        var vm = new Vue({ 
            el:"#app",
            data:{ 
                flag:true
            }
        })
    </script>

**v-if的使用场景**

*  1.多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
 *  2.进行两个视图之间的切换

# 二、v-else-if & v-else #

# 三、v-show #

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致与`v-if`一样。

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

> 注意：v-show 不支持 `<template>` 元素，也不支持 v-else。

# 四、v-show 和 v-if的区别 #

*  v-show本质就是标签display设置为none，控制隐藏
    
     *  v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
 *  v-if是动态的向DOM树内添加或者删除DOM元素
    
     *  v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

# 五、总结 #

*  v-if 的特点：每次都会重新删除或创建元素
 *  v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

--------------------

*  v-if 有较高的切换性能消耗
 *  v-show 有较高的初始渲染消耗

--------------------

*  如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
 *  如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

--------------------

参考链接：[https://cn.vuejs.org/v2/guide/conditional.html\#v-if-vs-v-show][https_cn.vuejs.org_v2_guide_conditional.html_v-if-vs-v-show]

如果您也正在学习前端的路上，记得关注该博主，学习更多关于前端的知识~

[博主主页 Poetic Code][Poetic Code]

[https_cn.vuejs.org_v2_guide_conditional.html_v-if-vs-v-show]: https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
[Poetic Code]: https://blog.csdn.net/weixin_44253336