wxml语法：循环语法

准备工作

• 在pages目录下新建一个List文件夹，在List文件夹上右击选择新建 Page，取名为list。
• 目录结构：

• 然后将app.json文件中pages数组里面的pages/List/list放在首位
  

循环语法

• 往pages/List/list.js里面添加一些数据

  data: {
    users:["张三","李四","王五","赵六"],
    obj:[
      {
        id:1,
        name:"zhangsan"
      },
      {
        id:2,
        name:"lisi"
      },
      {
        id:3,
        name:"wangwu"
      },
      {
        id:4,
        name:"zhaoliu"
      },
    ]
  },

• 在pages/List/list.wxml里面书写代码展示页面

<!--miniprogram/pages/List/list.wxml-->
<!-- 
  循环：
  1. 在小程序中循环操作涉及到几个属性
    wx:for：该属性用于指定循环处理的数据，类似于vue中的v-for指令，但是其属性值与vue的写法不一样、
      例如：假设要循环变量，变量名为users，在使用wx:for的是需要写成：wx:for="{{users}}"
    wx:key：给循环的标签加上唯一的key（可选），建议加。情况有：可以值为id，也可以为index，除此以外，其值还可以是"*this"，表当前元素
    wx:for-index：（可选）用于指定索引变量名，不写默认为index
    wx:for-item：（可选）用于指定循环到的元素变量名，不写默认为item
 -->
 <!-- 循环简单的数组：users -->
 <view wx:for="{{users}}" wx:key="*this">
  当前的索引：{{index}},用户名是：{{item}}
 </view>

 <!-- 这里有很大一部分html标签是无法使用的，例如下面的hr标签 -->
 <hr/>

 <!-- 实现分割线的思路，用view标签，给view标签加样式 -->



 <!-- 循环obj数据 -->
 <view wx:for="{{obj}}" wx:key="*this">
  循环到的索引：{{index}},用户ID是：{{item.id}},
  用户名是：{{item.name}}
 </view>

  <!-- 指定特定的index和item，来循环users -->
  <view wx:for="{{users}}" wx:key="*this" wx:for-index="key" wx:for-item="val">
  当前的索引：{{key}},用户名是：{{val}}
 </view>

• 运行效果截图：