vue中 v-if和v-show的区别

news/2024/7/10 2:37:34 标签: 前端, javascript, vue

vue中 v-if和v-show的区别:

相同点:都是控制元素的显示与隐藏。

区别:

 v-if:控制html元素的插入和移除,会导致浏览器的回流和重绘。

v-show:通过控制css中的display设置为none,控制元素的显示与隐藏。

v-if 使用在条件渲染不太频繁的情况下,如果控制元素显示隐藏的频率很高,使用v-show,有利于性能优化,可减少浏览器的回流和重绘


http://www.niftyadmin.cn/n/1569483.html

相关文章

async和defer

同步加载: html是按顺序执行的,script标签中未加入defer和async时,浏览器在解析文本的时候遇到script标签就会停止解析,去解析script里面的内容。 如果scrpit里有外部文件,那就必须等待下载和执行完毕,浏览…

class 与 style 如何动态绑定

class 与 style 动态绑定一般通过对象或者数组来实现。 对象写法:适用于要绑定的样式名字样式确定,但动态决定用不用。 数组写法:适用于要绑定的样式名字样式不确定。 1.class对象写法 可以传给v-bind:class一个对象,以动态地切…

使用npm install报错-4048 operation not permitted解决

使用npm install报错-4048 operation not permitted 1.给终端授管理员权限 打开的不是管理员终端命令或者是没有管理员权限 2、vscode打开管理员终端命令 1.执行:get-ExecutionPolicy,回复Restricted,表示状态是禁止的 2.执行:…

Git项目提交

Git项目提交: 1、添加到缓存 2、查看状态 3、将暂存区内容添加到仓库中 4、上传远程代码并合并 1、添加到缓存 git add . //添加文件到暂存区。 2、查看状态 git status //查看状态 3、将暂存区内容添加到仓库中 git commit -m “first commit” //将暂存区内容…

node和express搭建微型服务器

node和express搭建微型服务器 目录 node和express搭建微型服务器 1.创建一个文件夹 2.设置名字 3.安装 npm i express​编辑 4.新建一个主文件 server .js 5.启动服务器 node server 6. 访问5006端口​编辑 7.放置静态资源(测试) ​ 8. 访问5006…

promise是什么,以及使用方法

目录 1.Promise的作用 2.Promise使用方法 3.Promise特点 4.回调地狱 1.Promise的作用 异步编程的一种解决方案,解决了地狱回调的问题 2.Promise使用方法 promise可以由new promise()生成,接受一个函数为参数,这个函…

简述query和params之间的区别

query和params之间的区别: 1、query要用path 来引入,params要用name来引入, 2、接收参数时,分别是this.$route.query.name和this.$route.params.name(注意:是$route而不是$router). 3、query更加类似于我们ajax中get传参,params则类似于post&…

在Vue引入 Element-UI

在Vue2引入 Element-UI 1.安装 npm i element-ui -S 2.按需引入(借助 babel-plugin-component,只引入需要的组件,以达到减小项目体积的目的。) 首先,安装 babel-plugin-component npm install babel-plugin-com…