Vue条件渲染（v-if）

因为 v-if 是一个指令，所以必须将它添加到一个元素上。

在 <template> 元素上使用 v-if 条件渲染分组， <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-if 指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>

        <div id="app">
            <button v-on:click="open">开始</button>{{number}}
            <div v-if="number > 90">特等奖</div>
            <div v-else-if="number > 80">一等奖</div>
            <div v-else-if="number > 70">二等奖</div>
            <div v-else-if="number > 60">三等奖</div>
            <div v-else-if="number > 50">再来一次</div>
            <div v-else>谢谢参与</div>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            number: 0
        },
        methods: {
            open: function() {
                this.number = Math.random() * 100
            }
        }
    })
</script>

 

用 key 管理可复用的元素，因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>v-if 指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>

        <div id="app">
            <template>
                <div v-if="loginType === 'username'">
                    <label>username</label>
                    <input type="text" placeholder="enter your username">
                </div>
                <div v-else>
                    <label>passworld</label>
                    <input type="password" placeholder="enter your password">
                </div>
            </template>
            
            <template>
                <div v-if="loginType === 'username'">
                    <label>username</label>
                    <input type="text" placeholder="enter your username" key="a">
                    <!--vue是高效复用的，input还是2个input，当时输入缓存还在,为了区别开，用关键字key-->
                </div>
                <div v-else>
                    <label>passworld</label>
                    <input type="password" placeholder="enter your password" key="b">
                    <!--key 在浏览器控制台不显示哦，但能完美解决问题-->
                </div>
            </template>
            <button v-on:click="fun">点击切换</button>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            loginType: 'username',
        },
        methods: {
            fun: function() {
                this.loginType == 'username' ? this.loginType = 'password' : this.loginType = 'username';
            }
        }
    })
</script>

 

所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可，每次切换时，输入框都将被重新渲染，达到清除缓存的目的。

posted @ 2020-05-12 05:20  杵臼  阅读(2950)  评论(1)  编辑  收藏  举报