学习-Vue3-条件渲染

• v-if支持在 <template> 元素上使用，能和 v-else 搭配使用。
• v-show 不支持在 <template> 元素上使用， 也不能和 v-else 搭配使用。

<template>
<!-- <template> 上的 v-if
      因为 v-if 是一个指令，它必须依附于某个元素。但如果我们想要切换不止一个元素呢？
      在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含
      这个 <template> 元素。-->
  <template v-if="true">
    <!-- 切换使得下面两段文字同时显示 -->
    <p>第一行文字可以显示吗？</p>
    <p>第二行文字可以显示吗？</p>
  </template>
</template>

<script setup>

</script>

视图：

v-show 与 v-if 的区别：

v-show会在 DOM渲染中保留该元素，v-show仅切换了该元素上名为 display 的 CSS 属性。

v-if vs. v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下， v-show 简单许多，元素无论初始条件如何，时钟会被渲染，只有CSS dispaly 属性会被切换。

总的来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 更好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

v-if vs. v-for

warning: 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。