列表循环key的添加

h5

v-for中key的作用：为了高效的更新虚拟DOM。

v-for 的用法： items为一个数组 v-for="item in items" , items:源数组，item 是每个数组元素迭代的别名 v-for="(item, index) in items"，index可选参数，为当前项的索引


// 举例，列表数据
1.非对象数组
const items =['a','c','b']

2.对象数组
const items = [
      { message: 'Foo' ,id:'01'},
      { message: 'Bar' ,id:'02'}
    ]


// html模版
1. items 为非对象数组,key可取当前的索引index ,如 :key=''index"   
    <li v-for="(item, index) in items"   :key="index">
        {{item}}--{{index}}    
     </li>

2. arr为对象数组,key可取当前的索引index,  如 :key=''index",也可以取每个对象的属性例如id，如 :key=''item.id"，这两种方式key值都是唯一的
     <li v-for="(item, index) in items"  :key="item.id">
      {{ index }} -- {{ item.message }}--{{item.id}}
     </li>

小程序

wx:key属性的值只能是以下两种：

循环项是个对象的，找值唯一的属性，取其名称
循环项不是对象的，取 *this

举例：

// 列表数据

// 1. 项目是对象的
const fruits = [{
  id: '001',
  name: 'apple',
  color: 'red'
}, {
  id: '002',
  name: 'orange',
  color: 'yellow'
}, {
  id: '003',
  name: 'banana',
  color: 'yellow'
}]

// 2. 项目非对象 
const numbers = [1, 2, 3, 4]

// 3. 多重循环情况
students = [
  {
    id: 1,
    class: '1班',
    members: [
      { id: 11, name: 'wang'},
      { id: 12, name: 'zhao'},
      { id: 13, name: 'qian'},
    ]
  }, {
    id: 2,
    class: '2班',
    members: [
      { id: 21, name: 'zhou'},
      { id: 22, name: 'wu'},
      { id: 23, name: 'zheng'},
    ]
  }, {
    id: 3,
    class: '3班',
    members: [
      { id: 31, name: 'li'},
      { id: 32, name: 'deng'},
      { id: 33, name: 'yang'},
    ]
  },
]

<!-- wxml模板 -->

<view wx:for={{fruits}} wx:key="id">{{item.name}}</view>
<!-- key 也可以取属性名 name，即 wx:key="name"，只要唯一就行 -->

<!-- numbers的项目不是对象 -->
<view wx:for={{numbers}} wx:key="*this">{{item}}</view>

<!-- 内外层循环key值可以相同，对应不同循环项的属性名，不冲突 -->
<view wx:for={{students}} wx:key="id" wx:for-item="class">
    {{ class.class }}
    <!-- 上面的id，是对应class的id；下面的id，是对应item的id -->
    <view wx:for={{item.members}} wx:key="id">{{item.name}}</view>
</view>

douzi8 / lechebang

列表循环key的添加 #33

h5

小程序