vue7.条件渲染

---

条件渲染

v-if

<h2>v-if</h2>
    <div id="app1">
        <h1 v-if="awesome">Vue is awesome!</h1>
        <h1 v-else>Oh no 😢</h1>
    </div>
    <script>
        var app1 = new Vue({
            el:'#app1',
            data: {
                // awesome: true
                awesome: false
            }
        });
    </script>
    <hr>

---

v-else

<h2>v-else</h2>
    <div id="app3">
        <div v-if="Math.random() > 0.5">
            Now you see me
        </div>
        <div v-else>
            Now you don't
        </div>
    </div>
    <script>
        var app3 = new Vue({
            el: '#app3',
        })
    </script>

    <hr>

---

v-else-if

<h2>v-else-if</h2>
    <div id="app4">
        <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>
    </div>
    <script>
        var app4 = new Vue({
            el: '#app4',
            data: {
                type: 'B'
            }
        });
    </script>
    <hr>

---

使用key管理可复用的元素

<h2>使用key管理可复用的元素</h2>
    <p>未使用key的时候,在文本框中输入一些内容,再点击切换按钮,发现并没有重新渲染</p>
    <div id="app5">
        <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>
        <button v-on:click="toggle">toggle</button>
    </div>
    <script>
        var app5 = new Vue({
            el: "#app5",
            data: {
                loginType: 'username'
            },
            methods: {
                toggle: function () {
                    this.loginType = (this.loginType === 'username') ? 'email' : 'username';
                }
            }
        });
    </script>
    <hr>
    <p>使用key的时候,在文本框中输入一些内容,再点击切换按钮,发现并没有重新渲染</p>
    <div id="app6">
        <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>
        <button v-on:click="toggle">toggle</button>
    </div>
    <script>
        var app6 = new Vue({
            el: "#app6",
            data: {
                loginType: 'username'
            },
            methods: {
                toggle: function () {
                    this.loginType = (this.loginType === 'username') ? 'email' : 'username';
                }
            }
        });
    </script>
    <hr>

---

v-show

<hr>
    <h2>v-show</h2>
    <p>另外一个用于根据条件展示元素的选项是v-show指令.用法大致一样。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。注意，v-show 不支持 &lttemplate&gt元素，也不支持 v-else。</p>
    <div id="app7">
        <span v-show="ok">Hello!</span>
        <button v-on:click="toggle">toggle</button>
    </div>
    <script>
        var app7 = new Vue({
            el: "#app7",
            data:　{
                ok: true,
            },
            methods: {
                toggle: function () {
                    this.ok = !this.ok;
                }
            }
        });
    </script>
    <hr>

---

不推荐v-if与v-for一起使用