08条件渲染

# 条件渲染

条件渲染的时候，vue会尽可能的复用元素以降低切换开销。

<button @click="bool = !bool">切换</button>
<div v-if="bool">
  <label>账号</label>
  <input type="text">
</div>
<div v-else>
  <label>密码</label>
  <input type="password">
</div>

new Vue({
  el: "#app",
  data: {
    bool:true
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

但有时候我们可能并不想要vue复用这个元素，这时候我们就可以给原生加上key做为标记，让vue不再复用。

<button @click="bool = !bool">切换</button>
<div v-if="bool">
  <label>账号</label>
  <input type="text" key="username">
</div>
<div v-else>
  <label>密码</label>
  <input type="password" key="password">
</div>

new Vue({
  el: "#app",
  data: {
    bool:true
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这里的div会占空间，这时候我们可以换成template标签。

<button @click="bool = !bool">切换</button>

<template v-if="bool">
  <label>账号</label>
  <input type="text" key="username">
</template>
<template v-else>
  <label>密码</label>
  <input type="password" key="password">
</template>

1
2
3
4
5
6
7
8
9
10

# 练习

%accordion% 练习🚀 %accordion%

<div id="app">
    <button @click="bool=!bool">切换按钮</button>

    <!-- 这种用div 3-->
    <form>
        <div v-if="bool">
            <label for="">账号</label>
            <input type="text" key="username">
        </div>

        <div v-else>
            <label for="">密码</label>
            <input type="password" key="password">
        </div>
    </form>

    <!-- 这种加的【template】就没有div✨ -->
    <form>
        <template v-if="bool">
            <label for="">账号</label>
            <input type="text" key="username">
        </template>

        <template v-else>
            <label for="">密码</label>
            <input type="password" key="password">
        </template>
    </form>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            bool: true,
        }
    })
</script>

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

编辑

上次更新: 2023/08/06, 00:38:41

← 07class和style绑定 09列表渲染→