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

相关文章
|
6月前
|
前端开发 JavaScript
v-if和v-show的区别
v-if和v-show的区别
38 0
|
6月前
|
缓存 JavaScript 前端开发
揭秘`v-if`和`v-show`的区别:选择正确指令的技巧(下)
揭秘`v-if`和`v-show`的区别:选择正确指令的技巧(下)
|
6月前
|
JavaScript 前端开发
揭秘`v-if`和`v-show`的区别:选择正确指令的技巧(上)
揭秘`v-if`和`v-show`的区别:选择正确指令的技巧(上)
|
JavaScript 前端开发
v-show和v-if的区别(面试题)
v-show和v-if的区别(面试题)
57 0
|
JavaScript 前端开发
v-show和v-if区别
v-show和v-if区别
126 0
|
JavaScript 前端开发
v-if和v-show的区别?
v-if和v-show都是Vue.js框架中的指令,用于根据条件显示或隐藏DOM元素,但它们的实现方式不同,导致在使用时需要注意以下区别:
|
JavaScript 前端开发
|
JavaScript 前端开发
v-if与v-show的使用方法以及区别
v-if与v-show的使用方法以及区别 在vue里面有两种方式来控制元素的显示与隐藏,分别是v-if和v-show,这两种方式都可以控制元素的显示与隐藏,那么如何进行使用呢?
v-show的使用
v-show的使用
70 0