Vue学习(八)-v-show 的使用

v-for 循环遍历

v-for

---

对数组或者是对象进行遍历

使用

• 遍历数组

  1. 遍历中没有下标（index）值

     <li v-for="item in movies">{{item}}</li>
     
     movies: ['《星际穿越》', '《弱点》', '《一条狗的使命》', '《夏洛特烦恼》']
     

  2. 遍历过程中有下标（index）值

     <li v-for="(item, index) in movies">{{index}}.{{item}}</li>
     
     movies: ['《星际穿越》', '《弱点》', '《一条狗的使命》', '《夏洛特烦恼》']
     

• 遍历对象

  1. 遍历值（value）

     <li v-for="item in movies">{{item}}</li>
     
     movies: {
     	name: 'xyb',
     	age: 20,
     	sex: 'M'
     }
     

  2. 遍历键/值（key/value）

     <li v-for="(value, key) in movies">{{key}}-{{value}}</li>
     
     movies: {
     	name: 'xyb',
     	age: 20,
     	sex: 'M'
     }
     

  3. 遍历键/值/下标（key/value/index）

     <li v-for="(value, key, index) in movies">{{index}}-{{key}}-{{value}}</li>
     
     movies: {
     	name: 'xyb',
     	age: 20,
     	sex: 'M'
     }
     

组件的key属性

---

在使用 v-for 的时候，给对应的元素或者组件添加上一个 🔑 :key​ 属性

• 为什么要条件key属性？

  1. 这个和 Vue 的虚拟DOM的Diff算法有关

  2. 在很多列表节点中插入相同节点的时候，他内部的执行效率起始是很低的

     

  3. 使用 key 属性之后，各自相对的元素还是会相对，关注的点只在F上面

  

• 使用key是为了能够高效的更新虚拟DOM

• 使用

  <li v-for="item in movies" :key="item">{{item}}</li>
  
  movies: ['《星际穿越》', '《弱点》', '《一条狗的使命》', '《夏洛特烦恼》']