Vue语法学习第五课——条件渲染

130 阅读 0 评论 86 点赞

我是靠谱客的博主幽默音响，这篇文章主要介绍Vue语法学习第五课——条件渲染，现在分享给大家，希望可以做个参考。

① v-if 、v-else-if 、v-else

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
 1 <div v-if="type === 'A'">
 2   A
 3 </div>
 4 <div v-else-if="type === 'B'">
 5   B
 6 </div>
 7 <div v-else-if="type === 'C'">
 8   C
 9 </div>
10 <div v-else>
11   Not A/B/C
12 </div>

　　（1）v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

　　（2）v-else-if 和 v-else 必须紧跟在 v-if 的元素之后

　　用于 <template> 可使用 key 管理可复用的元素：

复制代码

1
2
3
4
5
6
7
8
9
10
11
　　<div id="app0">
         <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><br/>
        <button @click="changeLoginType">{{loginType}}</button>
    </div>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var vm = new Vue({
            el:"#app0",
            data:{                
                loginType : "username"
            },
            methods : {
                changeLoginType : function(){
                    if(this.loginType === 'username'){
                        this.loginType = "emailAddress";
                    }
                    else{
                        this.loginType = "username";
                    }
                    
                }
            }
        });