Vue.js 條件語句


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>條件渲染</title>
</head>
<body>
    <div id="if">
        <h1 v-if="ok">h1</h1>
        <h1 v-else>h2</h1>

        <template v-if="ok">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>

        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
        <!--v-else 元素必須緊跟在 v-if 元素或者 v-else-if的后面——否則它不能被識別-->
        <br>
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
        </template>
        <!--v-else-if 必須跟在 v-if 或者 v-else-if之后-->
        <!--Vue 嘗試盡可能高效的渲染元素,通常會復用已有元素而不是從頭開始渲染。<input> 會被復用,僅僅是替換了他們的 placeholder。-->
        <!--這樣也不總是符合實際需求,所以 Vue 提供一種方式讓你可以自己決定是否要復用元素。你要做的是添加一個屬性 key ,key 必須帶有唯一的值。-->
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>
        <!--注意, <label> 元素仍然會被復用,因為沒有被添加了 key 屬性。-->

        <h1 v-show="ok">Hello h1!</h1>
        <!--注意: v-show 不支持 <template> 語法-->
    </div>

    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#if",
            data: {
                ok:true,
                type:'D',
                loginType:'username2'
            }
        })
    </script>
</body>
</html>

v-if 也是惰性的:如果在初始渲染時條件為假,則什么也不做——在條件第一次變為真時才開始局部編譯(編譯會被緩存起來)。

相比之下, v-show 簡單得多——元素始終被編譯並保留,只是簡單地基於 CSS 切換。

一般來說, v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此,如果需要頻繁切換使用 v-show 較好,如果在運行時條件不大可能改變則使用 v-if 較好。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM