v-show 和v-if条件渲染

条件渲染指令:

v-if v-else-if v-else v-show

比较v-if 与 v-show

v-if: 通过删除DOM对象来隐藏

劣势: 重新显示时需要重新创建, 需要时间, 慢些,

优势: 隐藏时不占用着内存空间

v-show: 通过css样式display: none;来隐藏

优势: 重新显示时不需要, dom对象还在, 快些,

劣势: 隐藏时还占用着内存空间

如果是频繁切换, 一般用v-show相对更好些，两种方式都是在页面上视觉效果隐藏且不影响其它元素布局位置。

<template>
  <div>
    <!-- vif测试显示 -->
    <div v-if="ifFlag">测试vif允许显示时的结果</div>
    <div v-else-if="false">v-if等号后的条件为false且
    当前这个v-else-if等号后的条件为true则显示此标签</div>
    <div v-else>v-if和v-else-if等号后的条件都不为true则显示此标签</div>
    <!-- vif测试隐藏 -->
    <div v-if="!ifFlag">测试vif隐藏时的结果</div>

    <!-- vshow测试显示 -->
    <div v-show="showFlag">测试vshow允许显示时的结果</div>
    <!-- vshow测试隐藏 -->
    <div v-show="!showFlag">测试vshow隐藏时的结果</div>
  </div>
</template>

<script lang="ts">
// vue3.0版本语法
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: "组件名",
  setup() {
    const ifFlag = ref(true)
    const showFlag = ref(true)
    return {
      ifFlag,showFlag
    }
  },
});
</script>

页面结果：

结合js语法 三元运算符 && ||， 结合v-for使用v-if v-else小案例

<template>
  <div>
    <!-- 结合js语法 三元运算符 && || 等 使用v-if v-show -->
    <div v-if="timeNumber === 1 ? false : ifFlag">测试vif三元运算</div>
    <div v-else-if="timeNumber === 2 || dayNumber === 2">测试vif或运算</div>
    <div v-if="timeNumber === 2 && dayNumber === 2">测试vif与运算</div>

    <div v-show="timeNumber === 3 ? false : showFlag">测试vshow三元运算</div>
    <div v-show="dayList?.length || timeNumber === 1">测试vshow或运算</div>
    <div v-show="dayList?.length && dayList.length >= 1">测试vshow与运算</div>

    <!-- 结合v-for使用v-if v-else 小案例 -->
    <div
      v-for="(item, index) in dayList"
      :key="index"
    >
      <div v-if="item.type === 1">进行中{{item.text}}</div>
      <div v-else-if="item.type === 2">待开始{{item.text}}</div>
      <div v-else-if="item.type === 3">已完成{{item.text}}</div>
      <div v-else>暂未开始</div>
    </div>
  </div>
</template>

<script lang="ts">
// vue3.0版本语法
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: "组件名",
  setup() {
    const ifFlag = ref(true)
    const showFlag = ref(true)
    const timeNumber = ref(1)
    const dayNumber = ref(2)
    const dayList = ref([
      {
        type: 1,
        text: 's赛15分钟速通'
      },
      {
        type: 2,
        text: 's赛5连冠任务'
      },
      {
        type: 3,
        text: '单吃shy任务'
      },
      {
        type: 4,
        text: ''
      },
    ])
    return {
      ifFlag,showFlag,timeNumber,dayNumber,dayList
    }
  },
});
</script>

小案例页面结果：

另外v-if还有很多作用于项目中的方式，解决一些问题。

如父子组件通讯时： 子组件props的值还没有拿到，但是子组件页面已经渲染完成，子组件页面上使用到的地方并没有渲染出该值，可以在父组件中通过v-if判断值已经取到时再开始渲染子组件。

<xxx子组件 v-if="propsObj" :xxProps="propsObj" />

后续会讲到组件传参 > 再补充