Vue中的v-show和v-if_v-show对应的-CSDN博客

本文链接：https://blog.csdn.net/m0_66570642/article/details/130893566

文章介绍了Vue中的条件渲染指令v-if、v-else-if、v-else和v-show的用法，v-if会根据条件决定元素是否存在于DOM中，而v-show则是通过改变display属性控制元素的可见性。在频繁切换显示状态时，v-show更为合适，而对于初次渲染成本较高的情况，v-if更优。

摘要由CSDN通过智能技术生成

一、v-if、v-else-if、v-else

二、v-show

三、v-if和v-show对比

一、v-if、v-else-if、v-else

这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
v-if后面的条件为false时，对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。

<template>
  <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>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      score: 96,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

二、v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染
v-show当条件为false时，是将元素的display属性设置为none

<template>
  <div>
    <h2 v-show="isShow">我要显示</h2>
    <h2 v-show="!isShow">我不要显示</h2>
    <button @click="btnClick">切换显示</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    btnClick() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

三、v-if和v-show对比

v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
- v-if当条件为false时，压根不会有对应的元素在DOM中。
- v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
- 当需要在显示与隐藏之间切片很频繁时，使用v-show
- 当只有一次切换时，通过使用v-if