基础/条件渲染

v-if

这又是一个 Vue 内置的指令，如果传递的表达式返回值为真值，那么就会渲染这个标签及标签内的内容。

<template>
  <h1 v-if="helloIsShow">Hello</h1>
</template>

<script setup>
  import { ref } from 'vue'
  
  const helloIsShow = ref(true)
</script>

数据类型	为真值	为假值
boolean	true	false
number	非零值	0、NaN
string	非空字符串	空字符串
object	任意对象	null
undefined	无	undefined

v-else

和你想的一样，v-else 指令类似 if else 语句的 else 部分，和 else 类似，v-else 必须跟在设置了 v-if 或者 v-else-if 的元素后面，无法单独使用

<template>
  <h1 v-if="helloIsShow">Hello</h1>
  <!-- 只会渲染下面这个 -->
  <h2 v-esle>World</h2>
</template>

<script setup>
  import { ref } from 'vue'
  
  const helloIsShow = ref(false)
</script>

v-else-if

v-else-if 类似于 else-if 语句，只能跟在设置了 v-if 或者 v-else-if 的元素后面使用，无法单独使用。当然我们可以只有 v-if 和 v-else-if 不使用 v-else

<template>
  <h1 v-if="helloIsShow">Hello</h1>
  <!-- 只会渲染下面这个 -->
  <h2 v-esle-if="!helloIsShow">World</h2>
</template>

<script setup>
  import { ref } from 'vue'
  
  const helloIsShow = ref(false)
</script>

template 上的 v-if

如果想一次性控制某一个区域的渲染或隐藏，可以使用 template 标签包裹，然后在 tempalte 上可以使用 v-if 、 v-else-if 、 v-else ，当然用其他的双标签 HTML 标签都可以，只不过 template 不会产生实际的 DOM。

<template>
  <template v-if="userHasLogin">
    <p>用户名: {{ useInfo.name }}</p>
    <p>邮箱: {{ useInfo.email }}</p>
  </template>
</template>

<script setup>
  import { ref } from 'vue'
  
  const userHasLogin = ref(false)
  const userInfo = ref({
    name: '',
    email: ''
  })
</script>

v-show

可以使用 v-show 替代 v-if 指令，注意在设置 v-show 的元素后面无法给后续元素使用 v-else-if 、 v-else 指令。

v-show 指令无法在 template 标签上使用。

v-if 和 v-show

设置了 v-if 的元素，如果表达式返回的是假值，那么这个标签以及标签内的其他内容都不会创建实际的DOM，只有表达式返回真值的时候才会创建对应DOM。

如果你在页面上通过 v-if 来实现内容的显示和隐藏，那么每次显示对应内容的时候都是往对应位置添加这些 DOM 元素，也就是说当这些内容被隐藏掉，你无法通过 js 获取DOM。

和 v-if 不同， v-show 只是修改了元素的 display 这个css属性，如果隐藏内容就是设置 display 为 none ，此时你仍可以获取到对应 DOM。

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