vue从入门到精通(十一):条件渲染

条件渲染

1.v-if

写法:

(1).v-if="表达式"

(2).v-else-if="表达式"

(3).v-else="表达式"

适用于:切换频率较低的场景。

特点:不展示的DOM元素直接被移除。

注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被"打断"

2.v-show

写法:v-show="表达式"

适用于:切换频率较高的场景。

特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

3.备注

使用v-if的时候,元素可能无法获取到,而使用v-show一定可以获取到。

相关推荐
cypking27 分钟前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron
climber112130 分钟前
【Python Web】一文搞懂Flask框架:从入门到实战的完整指南
前端·python·flask
Watermelo61731 分钟前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
门前云梦33 分钟前
ollama+open-webui本地部署自己的模型到d盘+两种open-webui部署方式(详细步骤+大量贴图)
前端·经验分享·笔记·语言模型·node.js·github·pip
Micro麦可乐33 分钟前
前端拖拽排序实现详解:从原理到实践 - 附完整代码
前端·javascript·html5·拖拽排序·drop api·拖拽api
Watermelo61734 分钟前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
Micro麦可乐39 分钟前
前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践
前端·spring boot·后端·jwt·refresh token·无感token刷新
Heidi__39 分钟前
前端数据缓存机制详解
前端·缓存
讨厌吃蛋黄酥41 分钟前
前端路由双雄:Hash vs History,谁才是React项目的真命天子?
前端·react.js·设计
VillenK43 分钟前
vban2.0中table的使用—action封装
前端·vue.js