vue 条件渲染

条件渲染：简单的说你符合了某些条件就渲染某些东西

 

要点：

因为v-if把元素给暴力删除了,但v-show只通过改变display把元素隐藏了

也就是说v-show的实现底层就是修改display

比如动态此时的a就能实现一会儿隐藏一会儿显示了

  v-if使用时整个div都消失了并不是display改变了

做一个小案例

 点击事件让n++

初始值n为0当n为 1 2 3 时分别显示对应样式

用v-show:"n==1" v-show:"n==2" v-show:"n==3"实现

后面的每个都会判断一下 

验证：

 v-show 一般样式渲染变化的很频繁则使用v-show因为,它只改变display

v-if 不适用于样式渲染变化频繁,因为它会直接增加和删除dom节点如果很频繁会影响效率

v- else-if 与c++中的类似如果v-if或者前面有符合的则不会进行v-else-if的渲染,直接会跳到v-else-if之后的语句

v-else 与c类似

如果要使用
v-if v-else-if v-else 这个结构要紧紧的在一起不能分开

比如：

 

 因为只有有v-if 才有v-else-if 才有 v-else

注：v-show没有 else 只有 v-show

案例二 当n为1时同时展示三个div

 太重复了！

解决方法一：

 解决方法二：使用template但template能和v-if使用不能和v-show使用

template当在页面上显示时会自动去掉,但会保留其中元素的样式

 总结：