【Vue 基础知识】控制元素显示隐藏的方法和区别

提示：前端查漏补缺，仅代表个人观点，不接受任何批评

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、控制元素显示隐藏的方法

1. v-if 和 v-else 指令

• 单独使用 v-if，满足条件显示，反之隐藏

<template>
    <div v-if="a > 10">
        Demo show
    </div>
</template>

<script>
export default {
    data() {
        return {
            a:18
        }
    }
}
</script>

// 页面显示内容
Demo show
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• v-if 和 v-else 一起使用，满足v-if中的条件就显示有v-if判断中的代码内容，反之则显示 v-else中的内容

<template>
    <div v-if="a > 20">
        block A;
    </div>
    <div v-else>
        block B;
    </div>
</template>

<script>
export default {
    data() {
        return {
            a: 18
        }
    }
}
</script>

// 页面显示内容
 block B;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2. 切换元素的CSS display属性

• 用 v-show指令

<template>
    <div v-show="a>10">
        block A;
    </div>
</template>

<script>
export default {
    data() {
        return {
            a: 18
        }
    }
}
</script>

// 页面显示内容
 block A;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 设置元素的样式 （ display：none ）

<template>
    <div class="hide">
        block A;
    </div>
</template>

<style>
    .hide{
        display: none;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11

3. opacity属性

<template>
    <div class="hide">
        block A;
    </div>
</template>

<style>
    .hide{
       opacity: 0;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11

4. visibility属性

<template>
    <div class="hide">
        block A;
    </div>
</template>

<style>
    .hide{ 
        visibility: hidden;  //隐藏
        visibility: visible;   //显示
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12

5. width和height属性 （不建议使用）

<template>
    <div class="hide">
        block A;
    </div>
</template>

<style>
    .hide{ 
        width: 0;
        height: 0;
        overflow: hidden; //必须要有这个属性才能隐藏
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

---

二、区别

• v-if显示隐藏是将dom元素整个添加或删除;

• v-show隐藏是为该元素添加css–display:none，dom元素依旧还在，但是不占任何的位置;

• opacity是将元素的透明度设置为0, visibility: hidden是将元素隐藏，dom元素依旧还在，在网页中该占的位置还是占着.

---

三. 注意事项

• 有v-if的地方不一定有v-else，有v-else同级元素中必有v-if;
• v-if和v-else配合使用必须在同一级，不能存在不同级;

// 正确示例
<div>
      <div v-if="a > 0">
            block A;
      </div>
      <div v-else> block B; </div>
</div>

// 错误示例
<div>
      <div v-if="a > 0">
            block A;
            <div v-else> block B; </div>
      </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• v-if有更高的切换消耗；
• v-show有更高的初始渲染消耗；
• 如果需要频繁切换则用v-show，反之则用v-if.