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

news/2024/7/20 2:40:17 标签: 微信小程序, 小程序

注释很详细,直接上代码

上一篇

新增内容:
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:"男"}
           ]
        }
})

效果演示:

在这里插入图片描述


http://www.niftyadmin.cn/n/5358218.html

相关文章

leetcode 28.找出字符串中第一个匹配项的下标(python版)

需求 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。 如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示例 1&#xff1a; 输入&#xff1a;haystack…

【HTML5·本地存储】

本地存储 本地存储是指在客户端存储数据&#xff0c;HTML5 为我们提供了两种 API&#xff0c;分别是 localStorage 与 sessionStorage&#xff0c;二者作为 HTML5 新增的特性&#xff0c;它们的使用方法类似&#xff0c;都可以用来存储客户端临时信息&#xff0c;并且二者存储…

《每天十分钟》-红宝书第4版-迭代器与生成器(二)

生成器 基础知识 生成器的形式是一个函数&#xff0c;这个函数比较特殊&#xff0c;它拥有在一个函数块内暂停和恢复代码执行的能力。 函数名称前面加一个星号&#xff08;*&#xff09; 这就表示它是一个生成器了 // 生成器函数声明 function* generatorFn() {} // 生成器…

【2024全网最详细】Google 搜索命令终极指南

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 你是否尝试过使用 Google 搜索作为免费的 SEO …

c# textbox 提示文字

1. 定义提示文字内容 private readonly string RemarkText "最多输入100字"; // 提示文字 2. 添加textbox 焦点事件&#xff0c; 初始化textbox提示文字和字体颜色 public UserControl(){InitializeComponent();tb_Remark.Text RemarkText;tb_Remark.ForeColor…

虚拟机(VMware)ubuntu16.04 直接连接网口设备 USRP 吊舱

编辑虚拟网络编辑器 点击之后 选择网卡之后&#xff0c;点击确定。 电脑配置 使用了&#xff1a;192.168.2.56 虚拟机内部配置 和PC的配置一致

2024年光学通信和物联网、自动化控制和大数据国际会议(OCITACB2024)

会议简介 2024年国际光通信与物联网、自动控制和大数据会议&#xff08;OCITACB2024&#xff09;的主要目标是促进光通信与物联网、自动管理和大数据领域的研发活动。另一个目标是促进研究人员、开发人员、工程师、学生和从业者之间的科学信息交流。会议将每年举行一次&#x…

【项目实践02】【优先级阻塞队列】

文章目录 一、前言二、项目背景三、实现方案四、思路延伸1. 优先级队列1.1 concurrent 包下的 PriorityBlockingQueue1.2 Redisson 的优先级阻塞队列 2. jvisualvm 远程连接3. Jstack 高 CPU 排查 五、参考内容 一、前言 本系列用来记录一些在实际项目中的小东西&#xff0c;并…