10.分支循环结构

• 10.分支循环结构
  • 1.分支结构
  • 2.v-show 和 v-if的区别
  • 3.循环数组
  • 4.循环对象

1.分支结构

1).v-if

2).v-else

3).v-else-if

4).v-show

5).v-if 使用场景

• 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
• 2- 进行两个视图之间的切换

2.v-show 和 v-if的区别

• v-if 控制元素是否渲染到页面
• v-show 控制元素是否显示 (已经渲染到了页面) , 频繁显示隐藏元素, 建议使用v-show, 性能更好

3.循环数组

1). v-for遍历数组

<li v-for='item in list'>{{item}}</li>

<li v-for='(item, index) in list'>{{item}} + '----' + {{index}}</li>

2). key的作用: 帮助Vue区分不同的元素, 从而提高性能

<li :key='item.id' v-for='(item, index) in list'>{{item}} + '---' {{index}}</li>

4.循环对象

• v-for遍历对象

<div v-for='(value, key, index) in object'></div>

• v-if 和 v-for结合使用

<div v-if='value==12' v-for='(value, key, index) in object'></div>

• 不推荐同时使用 v-if 和 v-for
• 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。