<vue 基础知识 6、条件判断标签v-if>

代码结构

 

 

 

一、     01-v-if用法

1、效果  

根据分数的不同展现不同的汉字

2、代码

01-v-if用法.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01-v-if用法</title>
    </head>
    <body>
 
        <div id="app">
            <div v-if="score >= 90">游乐场玩</div>
            <div v-else>学习</div>
          
            <div v-if="score>=90">优秀</div>
            <div v-else-if="score>=80">良好</div>
            <div v-else-if="score>=60">及格</div>
            <div v-else>不及格</div>
        </div>
 
        <script src="vue.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    score: 85
                }
            })
        </script>
 
    </body>
</html>

 

二、     v-if和v-show区别

1、 效果

v-if当条件为false时，压根不会有对应的元素在DOM中。

v-show当条件为false时，仅仅是将元素的display属性设置为none而已

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>02-v-if和v-show区别</title>
    </head>
    <body>
 
        <div id="app">
            <h2 v-if="isShow">不错</h2>
            <h2 v-show="isShow">很好</h2>
        </div>
 
        <script src="vue.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    isShow: false
                }
            })
        </script>
 
    </body>
</html>

 

2、代码

v-if和v-show区别.html

 

三、03-条件渲染案例

1、效果

 

 

 

2、代码

03-条件渲染案例.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>03-条件渲染案例</title>
    </head>
    <body>
 
        <div id="app">
            <div v-if="type==='username'">
                <label for="username">用户账号</label>
                <input type="text" id="username" placeholder="用户账号" key="username">
            </div>
            <div v-if="type==='email'">
                <label for="email">用户邮箱</label>
                <input type="text" id="email" placeholder="用户邮箱" key="email">
            </div>
            <button @click="btnClick">切换类型</button>
        </div>
 
        <script src="vue.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    type: 'username'
                },
                methods: {
                    btnClick() {
                        this.type = this.type === 'username' ? 'email' : 'username'
                    }
                }
            })
        </script>
 
    </body>
</html>

 

 

资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！
posted @   万笑佛  阅读(2936)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示