微信小程序（二十七）列表渲染改变量名

注释很详细，直接上代码

上一篇

新增内容：

1.改变默认循环单元item变量名

2.改变默认循环下标index变量名

基础模板有问题可以先看上一篇

源码：

index.wxml

<view class="students">
    <view class="item">
        <text>下标</text>
        <text>序号</text>
        <text>姓名</text>
        <text>年龄</text>
        <text>性别</text>
    </view>
    <!-- 
        书接上篇，如果出现嵌套的怎么办，总不能都叫item吧
        这里阐述一下如何修改单元项的名字
        wx:for-item="新名字"

        举一反三，如何修改下标序号对象的名字
        wx:for-index="新名字"
    -->
    <view wx:for="{
    {students}}" wx:key="id" wx:for-item="stu" 
    wx:for-index="idx" class="item">
        <text>{
  {idx}}</text>
        <text>{
  {stu.id}}</text>
        <text>{
  {stu.name}}</text>
        <text>{
  {stu.age}}</text>
        <text>{
  {stu.gender}}</text>
    </view>
</view>

index.wxss

.item{
   
    display: flex;
    /* 水平均分 */
    justify-content:space-evenly;
}

index.js

Page({
   
    data:{
   
           students:[
               {
   id:1,name:"阿猫",age:20,gender:"男"},
               {
   id:2,name:"阿狗",age:19,gender:"女"},
               {
   id:3,name:"阿猪",age:18,gender:"男"}
           ]
        }
})

效果演示：