v-show和v-for区别

简介: v-show和v-for区别

v-for和 v-show指令都可以控制一个元素的显示和隐藏,它们两个的功能如此相似,那么有什么区别呢?

如果v-if和v-show的值同时为假时,v-if和v-show绑定的元素都不会在页面中显示,

如下所示

1、

 <div v-show="0">1111</div>
 <div v-if="0">222</div>


2、

 

对于``v-show```而言,当取值为假时,生成了这个元素,但却将这个元素通过 display:none 的方式隐藏了这个元素,所以在页面显示的时候就不显示

对于v-if而言,当取值为假时,不会生成这个元素,自然而然的也就不会在页面中显示

那么什么时候该用v-show、什么时候该用v-if呢?

当频繁的要使某些元素隐藏或者出现的时候,应该使用v-show,因为v-if每次使元素隐藏或者出现时,都会将元素重新的的插入或删除从DOM树中,这些操作会产生很大的工作量

但v-show却不会存在这样的情况,因为v-show已经生成了这个元素,只是通过display:none将其隐藏掉了

频繁的需要隐藏和出现就用v-show

相关文章
|
2天前
|
前端开发 JavaScript
v-if和v-show的区别
v-if和v-show的区别
16 0
|
9月前
|
JavaScript 前端开发
|
10月前
|
JavaScript 前端开发
v-show和v-if区别
v-show和v-if区别
114 0
|
10月前
|
JavaScript 前端开发
v-if和v-show的区别?
v-if和v-show都是Vue.js框架中的指令,用于根据条件显示或隐藏DOM元素,但它们的实现方式不同,导致在使用时需要注意以下区别:
|
12月前
|
存储 SQL 关系型数据库
Show命令
Show命令
61 0
|
JavaScript 前端开发
v-show的使用
v-show的使用
50 0
|
JavaScript 前端开发
v-if与v-show的使用方法以及区别
v-if与v-show的使用方法以及区别 在vue里面有两种方式来控制元素的显示与隐藏,分别是v-if和v-show,这两种方式都可以控制元素的显示与隐藏,那么如何进行使用呢?
|
JavaScript
面试题 v-if跟v-show的区别
面试题 v-if跟v-show的区别
75 0
|
JavaScript 开发者
v-if和v-show的使用和特点 | 学习笔记
快速学习v-if和v-show的使用和特点
128 0