VUE2.0 学习(八)条件渲染v-show,v-if,template标签

2021-10-18 11:32:49 浏览数 (2)

目录

  • 需求
  • 方法 `属性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 进行绑定使用。

总结

0 人点赞