【Vue指令】—v-if、v-show二者用法及区别

2024-04-12 08:27:50

【Vue】—条件渲染v-if指令和v-show指令

条件渲染

一、v-if指令

使用指令v-if，当指令的值是true时就渲染，是false就不渲染

二、v-show指令

使用v-show指令，当指令是true时就显示，是false就隐藏

三、二者的区别

v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除，如果删除，也就是页面中不存在这个dom元素，以此达到隐藏的效果

v-if在每次切换的时候都会重新创建或者销毁元素，有较高的切换性能消耗

v-if是惰性的，如果在初始渲染时条件为假，那就什么也不做，直到条件第一次变为真时，需要渲染时才会开始渲染条件块

v-show则是无论你的初始条件是什么，元素都会被渲染，就是dom元素始终是存在的，v-show只是通过控制css中的display属性来控制他的显示或隐藏,它拥有比较高的初始渲染消耗

四、使用场景

如果元素需要进行比较频繁的切换的话，推荐使用v-show

如果很少用到切换，或者元素可能永远都不会显示出来的话，就使用v-if

注意：如果已经在css中明确写出display : none 的话，在v-if中就算设置v-if为true也是不能让元素显示的，因为他没办法覆盖或者修改掉css里面的display : none属性，他只是会修改element style为display:""或者display:none

【Vue指令】—v-if、v-show二者用法及区别相关推荐

Linux查看文件指令cat、more、less用法与区别
众所周知Linux中命令cat.more.less均可用来查看文件内容,主要区别有: cat是一次性显示整个文件的内容,还可以将多个文件连接起来显示,它常与重定向符号配合使用,适用于文件内容少的情况: ...
Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on
Vue的基本代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
Vue（二）vue 指令及用法举例
目录一.Vue 指令 5. v-for 6. v-on 7. v-html 8. 防止用户短暂看到{{ }} v-cloak v-text 9. v-once 10. v-pre 一.Vue 指令 ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
vue停止指令_一个微小的Vue指令，当到达边缘时停止传播滚动
vue停止指令停止滚动 (vue-scroll-stop) A tiny Vue directive that stop propagation scroll when edge reached. ...
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
Vue指令实战：结合bootstrap做一个用户信息输入表格
结合前面的vue指令做了个小例子,用户在表单里面输入用户名和年龄,点击"添加"以后会保存到用户信息表里面 <!DOCTYPE html> <html> &l ...
Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
Vue指令之列表渲染
1. v-for 指令简介 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in/of items 形式的语法其中 items 是源数据数组,item 是被迭代的数 ...

最新文章

热门文章