gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson02
一 用v-if显示单个元素
举个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index1</title> </head> <body> <div id="app1"> <h1 v-if="isShow">显示1</h1> <!--if--else--单个元素--> <h1 v-else>显示2</h1> </div> </body> <script src="../js/vue.min.js"></script> <script> var vm = new Vue({ el:'#app1', data:{ isShow:false } }); </script> </html>
输出结果：显示2
二 v-if显示多个元素需配合<template>
v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则将不会被识别。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index2</title> </head> <body> <div id="app2"> <template v-if="isShow"> <!--if...else... 用template实现多个元素--> <div>显示1</div> <div>显示2</div> <div>显示3</div> <div>显示4</div> </template> <div> 显示5 </div> </div> </body> <script src="../js/vue.min.js"></script> <script> var vm = new Vue({ el:'#app2', data:{ isShow:true } }); </script> </html>
输出结果：显示1、显示2、显示3、显示4
三 v-show用于条件展示元素
不同的是带有v-show的元素始终会被渲染并保留在DOM中，v-show只是简单的切换元素的CSS属性display.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index4</title> </head> <body> <div id="app4"> <div v-show="isShow"> <!--注意：v-show不支持<template>元素，也不支持v-else--> 显示文本 </div> </div> </body> <script src="../js/vue.min.js"></script> <script> var vm = new Vue({ el:'#app4', data:{ isShow:true //切换isShow的值（布尔值） } }); </script> </html>
输出结果：显示文本
四 v-if和v-show的区别
(1)v-if是真实的渲染与卸载,只不过第一次渲染后,会将结果缓存一下
(2)v-show元素始终被编译并保留，只是简单地基于 CSS 切换
(3)总结: 如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构