26.Vue3：条件渲染

<template>
  <div class="hello">
    <h3>条件渲染</h3>
    <!-- 测试0: 常规写法 -->
    <p style="display: block;">常规写法显示</p>
    <p>{{display}}</p>
    <!-- 测试1: v-if: 用于条件渲染一块内容,只会再指令的表达式为true时才被渲染 -->
    <p v-if="flag">v-if的条件渲染结果为true</p>
    <!-- 测试2: v-else: 用于条件渲染一块内容,只会再指令的表达式为false时才被渲染,对应的if必须紧接一个if对应 -->
    <p v-if="flag2">v-else的条件渲染结果为flase</p>
    <p v-else="flag2">v-else的条件渲染结果为flase</p>
    <p v-else="flag">v-else的条件渲染结果为flase</p> <!-- 不会被加载,因为上一个flag被清空 -->
    <!-- 测试3: v-show:用于条件性展示选项时v-show的指令, 类似v-if, 但是不存在flase -->
    <p v-show="flag">v-show的指令</p>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      flag:true,
      flag2:false,
      display:'<p style="display: none;">常规写法不显示</p>'
    }
  }
}
// v-if VS v-show的区别：
// 1. v-if 时真正的条件渲染，确保在切换的过程中，条件块内的事件监听器和子组件会被重构与销毁（else时，在Element中并不会显示）

// 2.v-if时惰性的，当初始渲染时条件为假，则不会渲染，直到第一次为真时候，才会渲染条件块。

// 3.v-show，不管条件是上面，元素总会被渲染，并且基于CSS切换（display：）

// 4.一般来说，v-if更高的切换开销，而v-show有更高的初始渲染开销。频繁切换选择v-show，运行条件很少改变使用v-if。
</script>

v-if VS v-show的区别：

1. v-if 时真正的条件渲染，确保在切换的过程中，条件块内的事件监听器和子组件会被重构与销毁（else时，在Element中并不会显示）

2.v-if时惰性的，当初始渲染时条件为假，则不会渲染，直到第一次为真时候，才会渲染条件块。

3.v-show，不管条件是上面，元素总会被渲染，并且基于CSS切换（display：）

4.一般来说，v-if更高的切换开销，而v-show有更高的初始渲染开销。频繁切换选择v-show，运行条件很少改变使用v-if。