Vue核心语法第十二篇：条件渲染-北京尧图网络

一v-show1代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title绑定样式/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备好一个容器 -- div idroot !-- 控制显示和隐藏底层实现就是控制disabled属性 -- h2 v-showtrue欢迎来到{{name}}/h2 h2 v-showa欢迎来到{{name}}/h2 /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { name: 乐园, a: false }, methods: { } }) /script /body /html2效果二v-if-else1特点不满足条件的话元素都直接给删除了2代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title绑定样式/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备好一个容器 -- div idroot !-- 控制显示和隐藏底层实现就是控制disabled属性 -- h2 v-showtrue欢迎来到{{name}}/h2 h2 v-iffalse欢迎来到{{name}}/h2 /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { name: 乐园, a: false }, methods: { } }) /script /body /html3效果三场景一1代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title绑定样式/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备好一个容器 -- div idroot !-- 控制显示和隐藏底层实现就是控制disabled属性 -- !-- h2 v-showtrue欢迎来到{{name}}/h2 h2 v-iffalse欢迎来到{{name}}/h2 -- h2当前n是{{n}}/h2 button clickn点我n1/button dev v-shown0Angular/dev dev v-shown1React/dev dev v-shown2Vue/dev dev v-ifn0Angular/dev dev v-ifn1React/dev dev v-ifn2Vue/dev /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { name: 乐园, a: false, n: 0 }, methods: { } }) /script /body /html2效果四v-else-if和v-elsev-if v-else-if v-else中间不允许被打断。打断之后前面的可以后续的不生效了。1代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title绑定样式/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备好一个容器 -- div idroot !-- 控制显示和隐藏底层实现就是控制disabled属性 -- !-- h2 v-showtrue欢迎来到{{name}}/h2 h2 v-iffalse欢迎来到{{name}}/h2 -- h2当前n是{{n}}/h2 button clickn点我n1/button dev v-shown0Angular/dev dev v-shown1React/dev dev v-shown2Vue/dev !-- dev v-ifn0Angular/dev dev v-ifn1React/dev dev v-ifn2Vue/dev -- dev v-ifn0Angular/dev dev v-else-ifn1React/dev dev v-else-ifn2Vue/dev dev v-elseVue/dev /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { name: 乐园, a: false, n: 0 }, methods: { } }) /script /body /html五v-if和template配合使用1固定组合多个组件显隐判断逻辑一致使用此组合写一遍就可以了template不参与html 的dom。没有v-show和template的组合2总结v-if写法v-if表达式v-else-if表达式v-else表达式适用于切换频率较低的场景。特点不展示的 DOM 元素直接被移除。注意v‑if 可以和 v‑else‑if、v‑else 一起使用但要求结构不能被 “打断”。v‑show写法v‑show表达式适用于切换频率较高的场景。特点不展示的 DOM 元素未被移除仅仅是使用样式隐藏掉备注使用 v‑if 的时候元素可能无法获取到而使用 v‑show 一定可以获取到。

Vue核心语法第十二篇：条件渲染

相关推荐

零担专线物流怎么选？有实力的平台可关注这几家

IntelliJ IDEA 性能优化入门：一次大型项目卡顿问题的排查与修复记录

微信聊天记录永久保存方案：WeChatExporter开源导出工具完整上手指南（含避坑清单）

更多资讯

FoundationStereo深度解析：零样本立体匹配如何跨越域差距实现泛化

2026大连金属表面处理：一站式加工与供应商选型指南

2017年1月USACO白银组真题：二分、前缀和、逆向思维全解析

预训练语音大模型选型指南：从wav2vec到Qwen2-Audio

零基础神经网络入门：原理、架构与实战

DeepSeek Harness桌面端上手：安装配置、插件Skill部署与报错排查

今日更新

45个经典Linux面试题：从命令到网络排障的完整考点解析

SAP生产预留实战指南：MB21/MB23/MB25协同与MRP集成

编译原理实验：递归下降分析器消除左递归与避坑指南

本周精选

如何彻底离线使用 Laya-CoreML：Hugging Face 下载、缓存机制与 local_files_only 详解

基于1Panel 部署MySQL MCP 服务：TaoToken 统一 Key 接入与 config.toml 配置实战

崇州园区营销网站建设避坑指南：5大注意事项保备案安全

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？