VUE指令条件渲染v-if

最新推荐文章于 2023-06-10 23:34:24 发布

爱不到要偷

最新推荐文章于 2023-06-10 23:34:24 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhen-android/p/8076520.html

版权

条件语句

v-if/v-else

v1.v-else指令示例</div>

<hr />

<div>

</div>

</div>

v-else-if

v2.v-else-if指令示例</div>

<hr />

<div>

</div>

</div>

</div>

VUE指令v-if条件渲染

包括3种指令用法：v-if=(true/false)/v-else/v-else-if=(true/false)

v-show用法与v-if类似

v-show 指令

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

`v-if` vs `v-show`

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

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

//TODO

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换。

<!DOCTYPE html>
<html style="height: 100%;">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script>
        <title>HelloDemo</title>
    </head>

    <body style="height: 100%;">
        <style>

        </style>
        <!-- 
            VUE指令v-if条件渲染
                包括3种指令用法：v-if=(true/false)/v-else/v-else-if=(true/false)
                v-show用法与v-if类似
            REF:
                http://www.runoob.com/vue2/vue-if.html
                https://cn.vuejs.org/v2/guide/conditional.html
        -->
        <div id="appVue">
            <!--  -->
            
            <!-- 格式v-if="true/false" v-else-if="true/false" ... -->
            <div style="height: 100px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v2.v-else-if指令示例</div>
                <hr />
                <div>
                    <div style="font-size: 25px;" v-if="count > 10">
                        {{message0}}
                    </div>
                    <div style="font-size: 25px;" v-else-if="count > 5">
                        {{message1}}
                    </div>    
                    <div style="font-size: 25px;" v-else-if="count > 0">
                        {{message2}}
                    </div>                        
                </div>
            </div>
            
            <!-- 格式v-if="true/false" v-else -->
            <div style="height: 100px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v1.v-else指令示例</div>
                <hr />
                <div>
                    <div style="font-size: 25px;" v-if="isVisible">
                        {{message0}}
                    </div>
                    <div style="font-size: 25px;" v-else>
                        {{message1}}
                    </div>                    
                </div>
            </div>

            <!-- 格式v-if="true/false" -->
            <div style="height: 100px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v0.v-if指令示例</div>
                <hr />
                <div>
                    <div style="font-size: 25px;" v-if="isVisible">
                        {{message0}}
                    </div>
                </div>
            </div>

            <!-- 格式v-show="true/false" -->
            <div style="height: 100px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    show.v-show指令示例</div>
                <hr />
                <div>
                    <div style="font-size: 25px;" v-show="isVisible">
                        {{message0}}
                    </div>
                </div>
            </div>
        </div>
        <script>
            new Vue({
                    el: "#appVue",
                    data: {
                        message0: "AAA",
                        message1: "BBB",
                        message2: "CCC",
                        count: 10,
                        isVisible: true
                    }
                }

            )
        </script>
    </body>
</html>

View Code

REF:

http://www.runoob.com/vue2/vue-if.html

https://cn.vuejs.org/v2/guide/conditional.html

转载于:https://www.cnblogs.com/zhen-android/p/8076520.html

爱不到要偷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE指令条件渲染v-if

条件语句v-if/v-else<div style="height: 100px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.v-else指令...
复制链接

扫一扫