v-if/v-show — 显示隐藏
最后更新于:2022-04-02 08:06:23
[TOC]
>[success] # v-if /v-show -- 真显示
~~~
1.v-if 的特点:每次都会重新删除或创建元素("条件块内的事件监听器和子组件适当地被销毁和重建"),
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块
2.v-show 的特点:不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换 ,
每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式
3.v-if 有较高的切换性能消耗
4.v-show 有较高的初始渲染消耗(不管真假都创建。v-if 只有真才创建)
5. 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show
6. 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if
~~~
>[info] ## v-if 真显示
~~~
1.v-if 条件为真则显示
2.在 '' 元素上配合 v-if 使用的好处,就是可以将''作为一个整
体,且渲染的时候不显示''
3.'v-if' 配合'v-else' 使用
4.'v-if' 配合'v-else-if' 和 'v-else' 使用
~~~
>[danger] ##### 综合案例
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/22a50e5b286cd58be46907519772ee33_301x115.png)
~~~
Title
~~~
>[danger] ##### vue 文档中对 v-if 和 key的联合使用说明
~~~
1.下面代码的问题就是在input 输入内容后,切换后input中的内容依旧存在,出现这种问题通过上个章节
中的第一个图解可以很好解释,这种情况下dom是不会重新渲染的
~~~
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/f7/f4/f7f443d80cbd748d226fbc71370da03a_1228x517.png)
~~~ html
~~~
* 解决加一个key
~~~
1.这里要注意的是为什么单独给input 加key,原因为了让
';
1
2
3