v-if/v-show 條件渲染指令

xuanxuanQueen發表於2019-08-20

vue.js的條件指令v-if可根據表示式的值在DOM中渲染或銷燬元素/元件。

    <div id="app">
        <p v-if="status === 1">當status為1時顯示該行</p>
        <p v-else-if="status === 2">當status為2時顯示該行</p>
        <p v-else>否則顯示該行</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                status: 1
            }
        })
    </script>

如果一次判斷的是多個元素，可以在vue.js內建的template元素上使用條件指令，最終渲染的結果不會包含該元素。

    <div id="app">
        <template v-if="status === 1">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </template>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                status: 1
            }
        })
    </script>

v-show是改變元素的CSS屬性display,當v-show表示式的值為false時，元素會隱藏，檢視dom結構會看到元素上載入了內聯樣式display:none；v-show不能在template上使用。

    <div id="app">
        <p v-show="status === 1">當status為1時顯示該行</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                status: 2
            }
        })
    </script>

v-if與v-show的選擇

v-if是真正的條件渲染，會根據表示式適當的銷燬或重建元素及繫結的事件或子元件。
v-show是簡單的CSS屬性切換，無論條件真假都會被編譯。
v-if適合條件不經常改變的場景，V-show適用於頻繁切換條件。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章