Vue.js学习（六 v-if）

90 阅读 0 评论 60 点赞

我是靠谱客的博主勤奋蜜蜂，这篇文章主要介绍Vue.js学习（六 v-if），现在分享给大家，希望可以做个参考。

1. v-if，v-else，v-else-if

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2 v-if="isShow">{{message}}</h2>
    <h2 v-else>{{message}} not show</h2>

<h2 v-if="score>90">优秀</h2>
    <h2 v-else-if="score>80">良好</h2>
    <h2 v-else>及格</h2>

<h2>{{getMark()}}</h2>

<h2>{{mark}}</h2>
</div>

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id ="first">
    <!--1. 单独使用v-if：要带双引号-->
    <h2 v-if="true">哈哈</h2>

    <!--2. 从上向下执行 v-if v-else-->
    <h2 v-if="isShow">{{message}}</h2><!--取js中代码-->
    <h2 v-else>{{message}} not show</h2>

    <!--3. v-if, v-else-if ,v-else-->
    <h2 v-if="score>90">优秀</h2>
    <h2 v-else-if="score>80">良好</h2>
    <h2 v-else>及格</h2>

    <!--4. 不建议在html中写太多的逻辑，可以放在函数中-->
    <h2>{{getMark()}}</h2>

    <!--5. 也 可以放在计算属性中-->
    <h2>{{mark}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el:"#first",
        data:{
            message:"你好",
            isShow:true,
            score:100,
        },
        methods:{
            getMark(){
                let message;
                if(this.score>90){
                    message="优秀";
                }else if(this.score>80){
                    message="良好";
                }else{
                    message="及格";
                }
                return message;
            }
        },
        computed:{
            mark(){
                let message;
                if(this.score>90){
                    message="优秀";
                }else if(this.score>80){
                    message="良好";
                }else{
                    message="及格";
                }
                return message;
            }
        }
    })
</script>
</body>
</html>

2. 切换账号-邮箱案列

复制代码

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="first">
    <!--span标签：表明这是一块内容-->
    <!--两个span中间不能加br,否则v-if和v-else就链接不起来-->
    <span v-if="isUser">
        <!--label for: 点击用户账号，就会锁定for对应的id的输入框-->
        <label for="username">用户账号</label>
        <input type="text" id="username" placeholder="用户账号">
    </span>

    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱">
    </span><br>

    <button v-on:click="isUser= !isUser">切换账号</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el:"#first",
        data:{
            isUser:true,
        }
    })
</script>
</body>
</html>

3. 账号切换引发的input复用及解决方案

复制代码

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
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="first">
    <!--vue内部 input的复用问题-->
    <!--1. vue在渲染时候，先把页面所有的元素进行虚拟dom渲染，virtural DOM-->
    <!--2. 发现下面两个label类似且互斥，则只在虚拟dom中渲染一个-->
    <!--3. 引发的问题： 在用户账号中输入123，切换到邮箱后，email会出现123字样-->
    <!--4. 解决方案：加key，从而使虚拟dom不认为这两个label是相同的，因此不会复用-->
    <span v-if="isUser">
        <label for="username">用户账号</label>
        <input type="text" id="username" placeholder="用户账号" key="1">
    </span>

    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱" key="2">
    </span><br>

    <button v-on:click="isUser= !isUser">切换账号</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el:"#first",
        data:{
            isUser:true,
        }
    })
</script>
</body>
</html>

4. v-show VS v-if

复制代码

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id = "first">
    <!--1. v-if: 当切换true和false时，该元素会从dom中创建或者删除-->
    <h2 v-if="isUser" id="aaa">哈哈哈</h2>

    <!--2. v-show：切换时该元素不会从dom中删除或创建，而是增加了行内样式
         style="display:none;"-->
    <h2 v-show="isUser" id="bbb">嘿嘿嘿</h2>

    <!--3. 如何选择： 当频繁切换时，选择v-show，否则选择v-if -->

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el:"#first",
        data:{
            isUser:true,
        }
    })
</script>
</body>
</html>