小程序`uin-app`之列表循环

Posted 2021-05-18 李耀书

首先：

​ 我们 先来复习一下vue的列表循环 。

通过v-for指令基于一个数组来渲染一个列表。

基础语法就是

v-for="(item,index )in items" :key="index"

• key值的作用就是作为列表循环中列表项的唯一值，可以使下标，也可以是id值。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

通过简单的复习，可以对Vue的列表渲染有了重新的了解。

uin-app列表渲染

​ 在小程序中uin-app的语法在很大程度上是相似于Vue的，所以这就很方便我们的了解了。

   /*
     vue语法: <view v-for="(item,index) in arr"></view>
     语法: wx:for="{{数组或者对象}}" wx:for-item="循环项" wx:for- index="循环项的索引"
    1.当只是简单的遍历数组的时候 可以省略wx:for-item和wx:for-index 小程序会自动的生成
    2. wx:key 唯一的值  作用: 用来提高列表渲染的性能
          1). wx:key="*this" *this表示的是item本身
          2). 绑定一个在数据中 永不相同的字符串或者数据 (唯一值 与vue中的key是一样)
          3). 必须确保key值是唯一的并且不参与数据双向
    3. 遍历对象的时候 for-item表示的是对象的属性值(value)  for-index对应的是对象的属性名(key)
    4. 循环嵌套 必须确保for-item和for-index 的值不同即可
   */

简单循环：

<view  
      wx:for="{{friends}}" 
      wx:for-item="item" 
      wx:key="*this" 
      wx:for-index="id" >
    item: {{item}}, 索引: {{id}}</view>
 </view>

循环对象

<view>
   <view  
      wx:for="{{persion}}" 
      wx:for-item="value" 
      wx:key="*this" 
      wx:for-index="key" >
    属性名: {{key}}, 属性值: {{value}}</view>
 </view>

循环嵌套

 <view>
   <view  
   wx:key="*this" 
      wx:for="{{friends}}" 
      wx:for-item="item" 
      wx:for-index="id" >
      <view wx:key="*this" wx:for="{{item.friends}}" wx:for-item="item1" wx:for-index="index1">
          {{item1}}
      </view>
    </view>
 </view>