Vue3中的模板指令——条件渲染指令v-if和v-show

条件渲染指令v-if和v-show

v-if v-else-if v-else指令

<div v-if="show">
  <span>只有在 show = true 时显示</span>
</div>

<script setup>
import { ref } from 'vue'

const awesome = ref(true)
</script>

<template>
  <button @click="awesome = !awesome">toggle</button>

    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
</template>

<div v-if="type === 'A'">
  <span>A</span>
</div>
<div v-else-if="type === 'B'">
  <span>B</span> 
</div>
<div v-else>
  <span>都不是</span>
</div>

该指令只有当其javascript表达式中的值为true时，才进行渲染绘制其标签。

通过key属性的唯一性来标识一个标签，以提高渲染绘制的效率。

<div v-if="loginType === 'username'" key="username">
  username
</div>
<div v-else key="email">
  email
</div>

v-show指令

基于CSS显示/隐藏元素，相当于来回修改display属性的值。

<div v-show="ok">
  <span>在 ok=true 时显示</show>
</div>

在template模板标签上使用条件渲染

Vue框架中，template模板元素是一个不可见的包装器，它可以容纳多个元素，但是它本身不会渲染到DOM中。

<template v-if="user.loggedIn">
  <div>
    <!-- 用户信息 --> 
    <p>用户名:{{user.name}}</p>  
    <p>积分:{{user.points}}</p>
  </div>

  <div> 
    <!-- 用户菜单 -->
    <button>首页</button>
    <button>设置</button>
  </div>

</template>

<div v-else>
  <!-- 登录提示 -->
  <p>请登录后查看个人信息</p>
  <button>去登录</button>  
</div>

注：template模板标签上只能使用v-if，而不能使用v-show。

v-if和v-show的区别

• v-if执行的时候会删除和插入所在元素或模板，即重新渲染绘制所在元素。v-show则不会重新渲染绘制元素，仅仅修改元素的显示属性display。v-show的开销明显小于v-if，因此，效率更高。

• v-show不能在template模板标签上使用，而v-if则可以。

因此，开销本就比较小的场合两者区别不大，可以互换使用；如果显示或隐藏标签动作比较频繁时，且切换开销较小时，建议使用v-show；但是，如果标签容器中包含大量子元素且标签容器整体切换频率不高时，建议使用v-if。