v-if 和 v-show 有什么区别？能和 v-for 一起用吗？

<template>
  <!-- v-else-if、v-else 必须紧跟在 v-if 或 v-else-if 元素的后面 -->
  <p v-if="score >= 90">优秀</p>
  <p v-else-if="score >= 60">及格</p>
  <p v-else>不及格</p>

  <!-- v-if 可以用在 template 标签上，一次控制多个元素，template 本身不会渲染 -->
  <template v-if="isLoggedIn">
    <UserAvatar />
    <UserMenu />
  </template>

  <!-- 频繁切换的面板用 v-show -->
  <div v-show="panelOpen" class="panel">筛选条件</div>
</template>

<template>
  <!-- ❌ v-if 先执行，此时还没有 user，访问 user.active 会报错 -->
  <li v-for="user in users" v-if="user.active" :key="user.id">
    {{ user.name }}
  </li>
</template>

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

const users = ref([
  { id: 1, name: '张三', active: true },
  { id: 2, name: '李四', active: false },
])
const showList = ref(true)

// 需要过滤列表：用计算属性，结果会被缓存
const activeUsers = computed(() => users.value.filter((u) => u.active))
</script>

<template>
  <ul>
    <li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>
  </ul>

  <!-- 需要整体控制列表是否显示：在外层套一个带 v-if 的 template -->
  <ul>
    <template v-if="showList">
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </template>
  </ul>
</template>