Vue.js 条件语句

Vue.js 条件语句学习笔记

Vue.js 中的条件渲染主要通过v-if、v-else-if、v-else和v-show指令实现。它们用于根据表达式的真假值来控制 DOM 元素的显示与隐藏。

一、核心指令

1.v-if/v-else-if/v-else

这是一组互斥的条件指令，类似于 JavaScript 中的if...else if...else。

<template> <div> <!-- 条件为 true 时渲染 --> <p v-if="type === 'A'">显示内容 A</p> <!-- 条件为 true 时渲染 --> <p v-else-if="type === 'B'">显示内容 B</p> <!-- 其他情况渲染 --> <p v-else>显示默认内容</p> </div> </template> <script setup> import { ref } from 'vue' const type = ref('A') </script>

特点：

• 真/假切换：如果条件为假，元素完全不会被渲染到 DOM 中（包括事件监听器和子组件）。
• 销毁与重建：条件切换时，Vue 会销毁旧元素并创建新元素，触发组件的生命周期钩子（如onUnmounted,onMounted）。

2.v-show

<template> <p v-show="isVisible">这段文字通过 CSS 控制显示</p> </template> <script setup> import { ref } from 'vue' const isVisible = ref(true) </script>

特点：

• CSS 切换：元素始终存在于 DOM 中，只是通过 CSS 的display: none属性来控制显示。
• 初始渲染：无论条件真假，元素都会被渲染。
• 切换开销：切换时仅修改 CSS 样式，不涉及 DOM 操作。

二、v-ifvsv-show深度对比

选择建议：

• 如果用户操作频繁导致显示/隐藏切换（如 Tab 切换、折叠面板），使用v-show。
• 如果条件在运行时很少改变，或者初始状态为假（如登录页、错误提示），使用v-if以节省初始渲染资源。

三、<template>上的条件渲染

当需要对多个元素进行条件渲染时，可以将v-if放在<template>标签上。<template>本身不会渲染到 DOM 中，只会渲染其内部的内容。

<template> <div> <!-- 如果条件为真，渲染以下所有元素 --> <template v-if="showGroup"> <h2>标题</h2> <p>段落一</p> <p>段落二</p> </template> <!-- 否则渲染其他内容 --> <template v-else> <p>暂无内容</p> </template> </div> </template> <script setup> import { ref } from 'vue' const showGroup = ref(true) </script>

四、v-if与v-for的优先级问题（重要）

在 Vue 3 中，v-if的优先级高于v-for。这意味着v-if会先执行，导致v-for中的变量在v-if中不可用。

❌ 错误写法（Vue 3）

<!-- 错误：v-if 无法访问 v-for 中的 item --> <ul> <li v-for="item in items" v-if="item.isActive" :key="item.id"> {{ item.name }} </li> </ul>

原因：v-if先执行，此时item变量尚未定义。

✅ 正确写法

方案 1：使用计算属性（推荐）

将过滤逻辑移到computed中，保持模板简洁。

<template> <ul> <li v-for="item in activeItems" :key="item.id"> {{ item.name }} </li> </ul> </template> <script setup> import { ref, computed } from 'vue' const items = ref([ { id: 1, name: 'A', isActive: true }, { id: 2, name: 'B', isActive: false }, { id: 3, name: 'C', isActive: true } ]) const activeItems = computed(() => { return items.value.filter(item => item.isActive) }) </script>

方案 2：使用<template>包裹

将v-if放在外层的<template>上，v-for放在内部元素上。

<template> <ul> <template v-for="item in items" :key="item.id"> <li v-if="item.isActive"> {{ item.name }} </li> </template> </ul> </template>

注意：在 Vue 2 中，v-for优先级高于v-if，行为相反。但在 Vue 3 中，官方强烈建议避免在同一元素上同时使用这两个指令。

五、实战示例

1. 用户状态切换

<template> <div class="user-status"> <!-- 登录状态 --> <div v-if="isLoggedIn"> <p>欢迎回来，{{ userName }}！</p> <button @click="logout">退出登录</button> </div> <!-- 未登录状态 --> <div v-else> <p>请先登录</p> <button @click="login">去登录</button> </div> </div> </template> <script setup> import { ref } from 'vue' const isLoggedIn = ref(false) const userName = ref('张三') function login() { isLoggedIn.value = true } function logout() { isLoggedIn.value = false } </script>

2. 错误提示与加载状态

<template> <div> <!-- 加载中 --> <div v-if="loading"> <span>加载中...</span> </div> <!-- 加载失败 --> <div v-else-if="error"> <p>加载失败：{{ errorMessage }}</p> <button @click="retry">重试</button> </div> <!-- 加载成功 --> <div v-else> <ul> <li v-for="item in dataList" :key="item.id">{{ item.title }}</li> </ul> </div> </div> </template> <script setup> import { ref } from 'vue' const loading = ref(true) const error = ref(false) const errorMessage = ref('') const dataList = ref([]) // 模拟数据加载 function fetchData() { loading.value = true error.value = false setTimeout(() => { loading.value = false // 模拟成功或失败 if (Math.random() > 0.5) { dataList.value = [{ id: 1, title: '数据 1' }] } else { error.value = true errorMessage.value = '网络错误' } }, 1000) } function retry() { fetchData() } fetchData() </script>

3. 权限控制（简单版）

<template> <div> <h1>后台管理系统</h1> <!-- 管理员可见 --> <div v-if="userRole === 'admin'"> <button>删除用户</button> <button>修改系统设置</button> </div> <!-- 普通用户可见 --> <div v-else-if="userRole === 'user'"> <button>查看资料</button> <button>修改密码</button> </div> <!-- 访客 --> <div v-else> <p>您没有访问权限</p> </div> </div> </template> <script setup> import { ref } from 'vue' const userRole = ref('admin') // 可切换测试 </script>

六、最佳实践总结

1. 优先使用v-if：除非需要频繁切换，否则v-if是默认选择，因为它能避免不必要的 DOM 渲染。
2. 避免v-if和v-for混用：使用计算属性过滤数据，或改用<template>包裹。
3. 利用<template>：当需要条件渲染多个元素时，使用<template>避免产生多余的 DOM 节点。
4. 逻辑外移：复杂的条件判断逻辑应移至computed或methods中，保持模板简洁。
5. 性能优化：对于大型列表或复杂组件的条件渲染，v-if能显著减少初始渲染时间。

七、常见陷阱

陷阱 1：v-if初始值为false时的性能

如果初始条件为false，v-if不会渲染，节省资源。但如果初始为true，则必须渲染。

<!-- 初始不渲染，节省资源 --> <div v-if="false">内容</div>

陷阱 2：v-show无法阻止事件绑定

v-show只是隐藏元素，事件监听器依然绑定在元素上。如果元素被隐藏但事件依然触发（如通过 JS 触发），可能会产生意外行为。

<!-- 即使隐藏，点击事件依然可能触发（如果通过 JS 调用） --> <button v-show="false" @click="handleClick">隐藏按钮</button>

陷阱 3：组件生命周期

使用v-if切换组件时，组件会经历完整的挂载和卸载过程。

<template> <MyComponent v-if="show" /> </template> <script setup> import { ref } from 'vue' const show = ref(true) // 切换时，MyComponent 的 onMounted 和 onUnmounted 会被触发 </script>

掌握这些条件渲染指令，可以灵活控制 Vue 应用的 UI 状态，提升用户体验和性能。