快速入门Vue3：条件渲染与列表渲染的小秘密，你居然还不知道？

url: /posts/a325ca6534b78c20bd46c816c3f82aee/
title: 快速入门Vue3：条件渲染与列表渲染的小秘密，你居然还不知道？
date: 2025-10-31T00:01:29+08:00
lastmod: 2025-10-31T00:01:29+08:00
author: cmdragon

summary:
Vue中的条件渲染通过
v-if和
v-show实现，
v-if根据条件销毁或重建DOM，适合不频繁切换的场景；
v-show通过CSS控制显隐，适合频繁切换的场景。列表渲染使用
v-for遍历数组或对象，
key属性确保节点正确复用，避免使用索引作为
key。
v-for与
v-if不应同时使用，建议通过
computed属性过滤数据后再渲染。

categories:

vue

tags:

基础入门

Vue.js

条件渲染
列表渲染
v-if
v-show
v-for
key属性

扫描二维码关注或者微信搜一搜：
编程智域 前端至全栈交流与成长

发现1000+提升效率与开发的AI工具和实用程序：https://tools.cmdragon.cn/

一、条件渲染：控制DOM的显隐逻辑

条件渲染是Vue中根据状态动态添加/移除DOM元素的核心能力，主要通过
v-if系列指令和
v-show实现。

1.1
v-if：真正的“条件渲染”


v-if是Vue中最基础的条件指令，它会根据表达式的真假，完全创建或销毁对应的DOM元素（包括其内部的组件和事件监听器）。

基础用法

<template>
  <div class="user-profile">
    <!-- 未登录时显示登录按钮 -->
    <button v-if="!isLoggedIn" @click="login">立即登录</button>
    <!-- 登录后显示用户信息 -->
    <div v-else>
      <img src="avatar.png">{ username }}！</span>
      <button @click="logout">退出登录</button>
    </div>
  </div>
</template>

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

// 登录状态（初始未登录）
const isLoggedIn = ref(false)
// 用户名
const username = ref('')

// 登录逻辑
const login = () => {
  isLoggedIn.value = true
  username.value = 'Vue新手'
}

// 退出逻辑
const logout = () => {
  isLoggedIn.value = false
  username.value = ''
}
</script>

多分支条件：
v-else-if

当需要多个条件分支时，用
v-else-if连接：

<template>
  <div class="score-display">
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 70">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const score = ref(85) // 显示“良好”
</script>

批量条件渲染：
template

若需要多个元素同时满足条件，可使用
template包裹（
template不会渲染为真实DOM节点）：

<template>
  <template v-if="isAdmin">
    <button>管理用户</button>
    <button>查看日志</button>
    <button>设置权限</button>
  </template>
</template>

1.2
v-show：基于CSS的“显示切换”


v-show的作用与
v-if类似，但它不会销毁DOM元素，而是通过CSS的
display: none属性控制显隐。元素始终存在于DOM中，只是“看不见”。

基础用法

<template>
  <div class="tab-container">
    <button @click="activeTab = 'home'">首页</button>
    <button @click="activeTab = 'about'">关于我们</button>
    
    <!-- 用v-show切换tab内容 -->
    <div v-show="activeTab === 'home'" class="tab-content">首页内容</div>
    <div v-show="activeTab === 'about'" class="tab-content">关于我们</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const activeTab = ref('home') // 默认显示首页
</script>

1.3
v-if vs
v-show：核心差异与场景选择

二、列表渲染：遍历数据生成DOM

列表渲染是Vue中将数组/对象数据转换为DOM列表的核心能力，通过
v-for指令实现。

2.1
v-for的基本用法


v-for可以遍历数组、对象、字符串、数字，语法为：
v-for="(item, index) in data"（数组）或
v-for="(value, key, index) in object"（对象）。

1. 遍历数组（最常见）

<template>
  <ul class="todo-list">
    <!-- 遍历todos数组，item是当前项，index是索引 -->
    <li v-for="(todo, index) in todos" :key="todo.id">
      {
  
  { index + 1 }}. {
  
  { todo.text }}
      <button @click="deleteTodo(index)">删除</button>
    </li>
  </ul>
</template>

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

// 待办事项列表
const todos = ref([
  { id: 1, text: '学习Vue条件渲染' },
  { id: 2, text: '掌握v-for的key用法' },
  { id: 3, text: '完成一篇博客' }
])

// 删除待办项
const deleteTodo = (index) => {
  todos.value.splice(index, 1)
}
</script>

2. 遍历对象