循环遍历

  1. <template>
  2.     <view class="content">
  3.         <view class="box2" hover-class="box2-active" >
  4.             <view class="box" hover-class="box-active" hover-stop-propagation>
  5.                 this is a box
  6.             </view>
  7.         </view>
  8.         <view class="box" hover-class="box-active">
  9.             this is a box
  10.         </view>
  11.         <view class="">
  12.             this is a box1
  13.         </view>
  14.         <button type="default">按钮</button>
  15.         <button type="primary" disabled="">按钮</button>
  16.         <button type="warn" loading=""></button>
  17.         <image src="https://img0.baidu.com/it/u=2636535523,1482743544&fm=26&fmt=auto" mode="aspectFill"></image>
  18.         <image src="https://img0.baidu.com/it/u=2636535523,1482743544&fm=26&fmt=auto" mode="aspectFit"></image>
  19.         <view v-for="(item,index) in arr" :key='item.id'>
  20.             序号：{{item.id}},名字：{{item.name}},年龄：{{item.age}}
  21.         </view>
  22.     </view>
  23. </template>
  25. <script>
  26.     export default {
  27.         data() {
  28.             return {
  29.                 title: 'Hello',
  30.                 arr:[
  32.                     {
  33.                         name:'name1',
  34.                         age:'18',
  35.                         id:1
  36.                     },
  37.                     {
  38.                         name:'name2',
  39.                         age:'22',
  40.                         id:2
  41.                     },
  42.                     {
  43.                         name:'name3',
  44.                         age:'17',
  45.                         id:3
  46.                     }
  47.                 ]
  48.             }
  49.         },
  50.         onLoad() {
  52.         },
  53.         methods: {
  55.         }
  56.     }
  57. </script>
  59. <style>
  60.     .box{
  61.         height: 100rpx;
  62.         width: 100rpx;
  63.         background: #0000FF;
  64.     }
  65.     .box-active{
  66.         background:#ff5500;
  67.     }
  68.     .box2{
  69.         height: 200rpx;
  70.         width: 200rpx;
  71.         background-color: red;
  72.     }
  73.     .box2-active{
  74.         background-color: blue;
  75.     }
  76. </style>
  1.  <template>
  2.         <view>
  3.             <view v-for="(item, index) in items">  ********************** 
  4.                 {{ index }} - {{ item.message }}
  5.             </view>
  6.         </view>
  7.     </template>

在做循环的时候首先要有一个数组，是一个json，array，想要对studentArray里面的数据渲染的时候就要从里面定义

这个是专门来写v-for的，也就是说v-for要做循环，必须要写在某一个组件之内的，后面加上要循环的数组studentArray

之后定义要循环的每一项元素，元素名称叫stuObj，是一个对象，stuObj in studentArray

然后将数据进行展示

这是单个数组进行的循环

  1. <template>
  2.     <view v-for="stuObj in studentArray">  **********************
  3.         <view>姓名：{{stuObj.name}},年龄：{{stuObj.age}}</view>
  4.     </view>
  5. </template>
  7. <script>
  8.     export default {
  9.         data() {
  10.             return {
  11.                 studentArray:[
  12.                     {
  13.                         name:"jack",
  14.                         age:19
  15.                     },
  16.                     {
  17.                         name:"jon",
  18.                         age:22
  19.                     },
  20.                     {
  21.                         name:"jason",
  22.                         age:21
  23.                     },
  24.                     {
  25.                         name:"lucy",
  26.                         age:18
  27.                     },
  28.                     {
  29.                         name:"stark",
  30.                         age:16
  31.                     }
  32.                 ]
  33.             }
  34.         },
  35.         methods: {
  37.         }
  38.     }
  39. </script>
  41. <style>
  43. </style>

image.png

嵌套循环

它是一个双重循环
第二个循环体在第一个循环体内嵌套
标签
代表我们在循环的时候，它并不会在页面里面把标签输出
它仅仅是把元素进行循环

  1. <template>
  2.     <view v-for="stuObj in studentArray">
  3.         <view>姓名：{{stuObj.name}},年龄：{{stuObj.age}}</view>
  4.         <view>
  5.             <!-- <view v-for="sk in stuObj.skill">
  6.                 {{sk}},
  7.             </view> -->
  8.             <block v-for="sk in stuObj.skill">
  9.                 {{sk}},
  10.             </block>
  11.         </view>
  12.     </view>
  13. </template>
  15. <script>
  16.     export default {
  17.         data() {
  18.             return {
  19.                 studentArray:[
  20.                     {
  21.                         name:"jack",
  22.                         age:19,
  23.                         skill:["Java","HTML","css"]
  24.                     },
  25.                     {
  26.                         name:"jon",
  27.                         age:22,
  28.                         skill:["Java","css","vue"]
  29.                     },
  30.                     {
  31.                         name:"jason",
  32.                         age:21,
  33.                         skill:["HTML","springcloud","vue"]
  34.                     },
  35.                     {
  36.                         name:"lucy",
  37.                         age:18,
  38.                         skill:["Java","HTML","springcloud"]
  39.                     },
  40.                     {
  41.                         name:"stark",
  42.                         age:16,
  43.                         skill:["HTML","css","vue"]
  44.                     }
  45.                 ]
  46.             }
  47.         },
  48.         methods: {
  50.         }
  51.     }
  52. </script>
  54. <style>
  56. </style>

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略

如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符

:key 的值以两种形式提供

  • 使用 v-for 循环 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变
  • 使用 v-for 循环中 item 本身，这时需要 item 本身是一个唯一的字符串或者数字

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率

如不提供 :key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

示例：

  1. <template>
  2.         <view>
  3.             <!-- array 中 item 的某个 property -->
  4.             <view v-for="(item,index) in objectArray" :key="item.id"> **********************
  5.                 {{index +':'+ item.name}}
  6.             </view>
  7.             <!-- item 本身是一个唯一的字符串或者数字时，可以使用 item 本身 -->
  8.             <view v-for="(item,index) in stringArray" :key="item">
  9.                 {{index +':'+ item}}
  10.             </view>
  11.         </view>
  12.     </template>
  13.     <script>
  14.     export default {
  15.         data () {
  16.             return {
  17.                 objectArray:[{
  18.                     id:0,
  19.                     name:'li ming'
  20.                 },{
  21.                     id:1,
  22.                     name:'wang peng'
  23.                 }],
  24.                 stringArray:['a','b','c']
  25.             }
  26.         }
  27.     }
  28.     </script>

嵌套列表渲染，必须指定不同的索引！

  1. <template>
  2.     <scroll-view v-for="(card,index) in list" :key="index">
  3.         <view v-for="(item,itemIndex) in card" key="itemIndex">
  4.         ({item.value})
  5.     </view>
  6.     </scroll-view>
  7. </template>

在这种嵌套循环的时候，index和itemIndex这种索引必须指定，且别名不能相同
2行，index是默认，不写的话也会默认加上，这个是在编译的时候进行的
3行，itemIndex，这样两个index在循环的时候他们的下标就不会有冲突

任何语言开发都一样，在做嵌套循环的时候，下标必须要定义为不同的

2行,8行，(stuObj,stuIndex)和(sk,itemIndex)在循环的时候，stuObj和sk代表对象，stuIndex和itemIndex代表下标

  1. <template>
  2.     <view v-for="(stuObj,stuIndex) in studentArray">
  3.         <view>姓名：{{stuObj.name}},年龄：{{stuObj.age}}</view>
  4.         <view>
  5.             <!-- <view v-for="sk in stuObj.skill">
  6.                 {{sk}},
  7.             </view> -->
  8.             <block v-for="(sk,itemIndex) in stuObj.skill">
  9.                 {{sk}},
  10.             </block>
  11.         </view>
  12.     </view>
  13. </template>
  15. <script>
  16.     export default {
  17.         data() {
  18.             return {
  19.                 studentArray:[
  20.                     {
  21.                         name:"jack",
  22.                         age:19,
  23.                         skill:["Java","HTML","css"]
  24.                     },
  25.                     {
  26.                         name:"jon",
  27.                         age:22,
  28.                         skill:["Java","css","vue"]
  29.                     },
  30.                     {
  31.                         name:"jason",
  32.                         age:21,
  33.                         skill:["HTML","springcloud","vue"]
  34.                     },
  35.                     {
  36.                         name:"lucy",
  37.                         age:18,
  38.                         skill:["Java","HTML","springcloud"]
  39.                     },
  40.                     {
  41.                         name:"stark",
  42.                         age:16,
  43.                         skill:["HTML","css","vue"]
  44.                     }
  45.                 ]
  46.             }
  47.         },
  48.         methods: {
  50.         }
  51.     }
  52. </script>
  54. <style>
  56. </style>

写了**:key**之后能够保证循环的时候每一行的元素，每一行的元素如果包含了相应的组件的话，这个组件会和我们循环的值进行一个绑定，是保证我们在当前页面的全局唯一性，简而言之就是循环每一项保证唯一

示例

16行，为学生增加编号，保证学生的唯一性，加入ID，这个ID就是和key做绑定的，然后要在view中做渲染，
38行，通过this.studentArray来获得data里面的数据，this代表当前页面里整体的对象
45行，所有JS里面只要有数组就有方法，push，它是向数组尾部一个个添加新的项
46行，unshift是向数组首部添加项
3行，用:key保证组件和属性数据捆绑在一起

  1. <template>
  2.     <view>
  3.         <view v-for="stu in studentArray" :key="stu.id">  //:key保证组件和数据捆绑唯一 
  4.             <checkbox :value="stu.name"></checkbox>
  5.         </view>
  6.         <button type="primary" @click="addStu">新增学生</button>    
  7.     </view>
  8. </template>
  10. <script>
  11.     export default {
  12.         data() {
  13.             return {
  14.                 studentArray:[
  15.                     {
  16.                         id:1,
  17.                         name:"jack",
  18.                         age:19,
  19.                         skill:["Java","HTML","css"]
  20.                     },
  21.                     {
  22.                         id:2,
  23.                         name:"jon",
  24.                         age:22,
  25.                         skill:["Java","css","vue"]
  26.                     },
  27.                     {
  28.                         id:3,
  29.                         name:"jason",
  30.                         age:21,
  31.                         skill:["HTML","springcloud","vue"]
  32.                     },
  33.                 ]
  34.             }
  35.         },
  36.         methods: {
  37.             addStu(){
  38.                 var studentArray = this.studentArray;  
  39.                 var newId = studentArray.length + 1;
  40.                 var newStu = {
  41.                     id:newId,
  42.                     name:"新生" + newId,
  43.                     age:18
  44.                 }
  45.                 studentArray.push(newStu);
  46.                 studentArray.unshift(newStu);
  47.             }
  48.         }
  49.     }
  50. </script>
  52. <style>
  54. </style>

注意事项

  • 在H5平台 使用 v-for 循环整数时和其他平台存在差异，如 v-for="(item, index) in 10" 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。
  • 在非H5平台 循环对象时不支持第三个参数，如 v-for="(value, name, index) in object" 中，index 参数是不支持的。
  • 小程序端数据为差量更新方式，由于小程序不支持删除对象属性，使用的设置值为 null 的方式替代，导致遍历时可能出现不符合预期的情况，需要自行过滤一下值为 null 的数据（相关反馈）。


    在组件上使用 v-for

在自定义组件上，你可以像在任何普通元素上一样使用 v-for

  1. <my-component v-for="item in items" :key="item.id"></my-component>

当在组件上使用 v-for 时，key是必须的

点击查看【bilibili】