VUE2.0 学习（八）条件渲染v-show，v-if，template标签

目录

• 需求
• 方法 `属性v-show`
• • v-show动态设置值
• v-if
• 对比
• v-else-if
• v-else
• template标签
• 总结

需求

根据一定的条件，让页面上面的某一个区域div进行展示，或者不展示

方法 属性v-show

就是进行判断，vue里面有一个指令v-show，他为true，那么对应的标签就会展示，为false，就不展示

在这里插入图片描述

v-show的值还可以是表达式，只要表达式的返回值是Boolean值就可以

v-show动态设置值

在这里插入图片描述

在这里插入图片描述

v-if

在这里插入图片描述

他的值也是true或者false

对比

切换频率高的用v-show

v-else-if

在这里插入图片描述

以上是一组判断

v-else

在这里插入图片描述

前面条件都不符合的时候，才走v-else

template标签

我们有一个需求，页面上面有很多的标签，我们想要这些标签要么都展示，要么都不展示，但是还不能破坏样式的结构，我们可以在这些标签外面包裹一个template标签，这个标签只能和v-if 进行绑定使用。

在这里插入图片描述

总结

在这里插入图片描述