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>