vue.js前端条件渲染指令相关知识点

一、指令分类:

条件渲染指令:

v-if

v-show

二、指令作用解释:

他们的作用是用于 主要用于条件判断 如果条件成立 就显示内容 否则不显示

三、语法格式:

语法:

<标签 v-if="条件判断">数据</标签>

<标签 v-ishow="条件判断">数据</标签>

四、指令区别:

他们之间的区别:

1.v-if他是条件成立 就创建控件

条件不成立 就删除控件

  1. v-show他是条件成立就显示控件

条件不成立 就隐藏 控件 他 (v-show) 不会删除控件

五、使用原则

原则:

如果控件偶尔使用(用的很少),一般使用v-if 条件成立时创建控件 条件不成立 就删除控件

这样可以避免资源浪费****( 十天半个月不用 )

如果控件会频繁使用 一般使用v-show,用的时候显示,不用的时候隐藏,这样可以避免频繁删除控件 带来的额外资源消耗

六、共同点:

条件满足就显示 不满足就不显示

七、代码展示:

八、运行结果:

相关推荐
知识搬运临时工5 分钟前
一个模板把 AEM 拖进 Full GC 死亡螺旋:300% CPU、7 GB 堆、310 万行堆栈
java·aws
CCIE-Yasuo7 分钟前
网络安全-学习web开发-列表、标签
前端·学习·web安全
用户432935928059 分钟前
CoAP还是MQTT:1万只Cat.1水表三个月带宽续航实测
java
小大宇11 分钟前
Vue知识点-ElementPlus-06 单选+多选+下拉+日期选择
前端·vue.js·elementui
用户114818678948413 分钟前
Nuxt 3 学习版 Demo:跟着做一遍,从跑起来到自己会改
前端
知守观19 分钟前
多模块架构演进:横向分层 vs 纵向领域,13 个真实项目的切分对照
java·后端·微服务
Java成神之路-34 分钟前
Java String 为什么不可变?和 HashMap 到底有什么关系?
java
hiahiahia12336 分钟前
Streaming Model Output
开发语言·前端
paopaokaka_luck37 分钟前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩1 小时前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron