VUE指令条件渲染v-if

时间 2020-06-21

标签 vue 指令条件渲染繁體版

原文原文链接

条件语句

v-if/v-elsejavascript

html

<div style="height: 100px;background: #CCC;margin: 5px;">vue

<div style="font-size: 20px;">java

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

<hr />ide

<div>ui

<div style="font-size: 25px;" v-if="isVisible">spa

{{message0}}code

</div>htm

</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

1. vue条件渲染
2. Vue 条件渲染
3. Vue——条件渲染&列表渲染
4. Vue条件渲染与列表渲染
5. [vue]vue条件渲染v-if(template)和自定义指令directives
6. Vue:渲染、指令、事件、组件、Props
7. VUE之属性、条件、渲染、事件指令及修饰符
8. vue中的条件渲染
9. Vue基础-条件渲染
10. vue 条件渲染方式
更多相关文章...
• MySQL HAVING：指定过滤条件 - MySQL教程
• Rust 条件语句 - RUST 教程
• Docker 清理命令
• 算法总结-双指针

VUE指令条件渲染v-if

条件语句

v-if vs v-show

`v-if` vs `v-show`