vue 怎么实现隐藏和显示的功能,v-if和v-show的部分区别,以及用到v-if隐藏后索引无法跳过的解决方案
隐藏和显示是经常用到的功能,一般我们看到隐藏就会用到display:black/none
这个属性以及属性值,但是在vue中有专门的属性来做到,
第一个
第一个就是用v-if="true/false"
案例:
<li class="slide-bian" v-for="(na,ket) in newsall" v-if="na.xs=='是'" ></li>
这样的话如果是就是true不是的话就是false 但是用这个进行隐藏后会直接将这个**<li ></li>**
标签完全隐藏掉! 如图:
这里只有三个<li></li>
其实是有四个,只是我隐藏了一个,那么这么会导致什么问题呢???
如图:
图上面是第二个变色但是实际上我的鼠标经过的是第一个,这就是问题!!!
如果隐藏第一个照片,那么当鼠标经过第一个的时候会触发第二个的变化,以此轮推,如果隐藏第二个那么第一个不会有影响之后的就会有影响
如果改成v-show=""
就如图所示:
这样的话<li></li>
被隐藏了但是代码还在所以不会出现上面那种情况
通过上面两个案例可以得出,v-if=""
的安全性要高于v-show
但是也会造成一定影响