小程序33-列表渲染

 列表渲染 就是指通过循环遍历一个数组或对象,将其中的每个元素渲染到页面上


在组件上使用 wx:for 属性绑定一个数组或对象,既可使用每一项数据重复渲染当前组件
每一项的变量名默认为item,下标变量名默认为index

在使用 wx:for进行遍历的时候,建议加上wx:key 属性,wx:key的值以两种形式提供:

  1. 字符串: 代表需要遍历的array 中 item的某个属性,该属性的值需要是列表中唯一的字符串或数字,且不能动态改变
  2. 保留关键字*this 代表在for 循环中的item 本身,当item 本身是一个唯一的字符串或者数字时可以使用

注意事项:

  1. 如果不加wx:key,会报一个warning,如果明确知道该列表是静态,即以后数据不会改变,或者不必关注其顺序,可以选择忽略。
  2. 在给 wx:key 添加属性值的时候,不需要使用双大括号语法,直接使用遍历的array中item的某个属性
<!--pages/profile/profile.wxml--><!-- 如果需要进行列表渲染,需要使用 wx:for属性 -->
<!-- 属性值需要使用双大括号进行包裹 -->
<!-- 每一项的变量名默认是item -->
<!-- 每一项下标的变量名默认是 index -->
<view wx:for="{{ numList }}">{{ item }} - {{ index }}</view><!-- 如果渲染的是数组,item:数组的每一项,index:下标 -->
<view wx:for="{{ obj }}">{{ item }} - {{ index }}</view><!-- wx: key 提升性能 -->
<!-- wx: key 属性值有两种添加方式 -->
<!-- 1.字符串,需要遍历数组item的某个属性,要求该属性是列表中唯一的字符串或者数字,不能进行动态改变 -->
<!-- 2.保留关键字 *item 代表的是item本身,item本身是唯一的字符串或者数字 -->
<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
// pages/profile/profile.js
Page({/*** 页面的初始数据*/data: {numList: [1,2,3],fruitList: [{ id: 1, name: '🍎' },{ id: 2, name: '🍋' },{ id: 3, name: '🍅' }],obj: {name: 'tom',age: 10}}})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/diannao/85153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[ Qt ] | QRadioButton和QCheckBox的使用

目录 QRadioButton 常用属性 clicked(bool)信号、pressed信号、released信号 小项目 QRadioButton QRadioButton是一个单选按钮&#xff0c;也是继承自QAbstractButton(继承自QWidget) 常用属性 checkable 是否能选中 checked 是否已经被选中 autoExclusive 是否排…

[网页五子棋][匹配模式]创建房间类、房间管理器、验证匹配功能,匹配模式小结

文章目录 创建房间类创建房间类实现房间管理器 实现匹配器(3)验证匹配功能问题&#xff1a;匹配按钮不改变验证多开 小结 创建房间类 LOL&#xff0c;通过匹配的方式&#xff0c;自动给你加入到一个房间&#xff0c;也可手动创建游戏房间 这一局游戏&#xff0c;进行的“场所…

Apifox 5 月产品更新|数据模型支持查看「引用资源」、调试 AI 接口可实时预览 Markdown、性能优化

Apifox 新版本上线啦&#xff01; 看看本次版本更新主要涵盖的重点内容&#xff0c;有没有你所关注的功能特性&#xff1a; 自动解析 JSON 参数名和参数值调试 AI 接口时&#xff0c;可预览 Markdown 格式的内容性能优化&#xff1a;新增「实验性功能」选项 使用独立进程执行…

Spring MVC 框架

目录 1.MVC的定义 2.SpringMVC的实际应用 &#xff08;1&#xff09;建立连接 1.RequestMapping注解介绍 2.RequestMapping注解的请求方式 GET请求&#xff1a; POST请求&#xff1a; 指定GET/POST方法类型&#xff1a; &#xff08;2&#xff09;请求 传递参数 1.传…

基于RK3568/RK3588/全志H3/飞腾芯片/音视频通话程序/语音对讲/视频对讲/实时性好/极低延迟

一、前言说明 近期收到几个需求都是做音视频通话&#xff0c;很多人会选择用webrtc的方案&#xff0c;这个当然是个不错的方案&#xff0c;但是依赖的东西太多&#xff0c;而且相关组件代码量很大&#xff0c;开发难度大。所以最终选择自己属性的方案&#xff0c;那就是推流拉…

AI+爆款文案,提示词脚本 ——卫朋

目录 简介 提示词 作者简介 简介 用好AI的前提是脑子里面要有框架。 AI就像是一个刚出生的小孩&#xff0c;没有判断力&#xff0c;疯狂接收世界上的各类信息。 如果没有从小的规则框架约束、没有道德约束&#xff0c;最终的结果就一定是混乱无序的。 AI也是一样&#x…

芯片:数字时代的算力引擎——鲲鹏、升腾、海光、Intel 全景解析

在大模型爆炸的时代&#xff0c;芯片如同现代文明的“数字心脏”&#xff0c;驱动着从智能手机、数据中心到人工智能和超级计算的每一个关键进程。在这场算力竞赛中&#xff0c;华为鲲鹏、升腾、海光以及行业巨头Intel各自扮演着独特而至关重要的角色。本文将深入解析这些核心算…

传输层协议TCP(上)

上一篇https://blog.csdn.net/Small_entreprene/article/details/148143494?fromshareblogdetail&sharetypeblogdetail&sharerId148143494&sharereferPC&sharesourceSmall_entreprene&sharefromfrom_link 上文学习了传输层的协议之一UDP&#xff0c;接下来…

关于ios点击分享自动复制到粘贴板的问题

前言 Android 系统没有什么特别的要求&#xff0c;实现这个也比较容易。但ios在某些情况下就会出现问题。 如果ios是点击之后&#xff0c;请求接口&#xff0c;再把接口的内容赋值给粘贴板肯定行不通&#xff0c;会被ios系统拦截&#xff0c;导致赋值失败或者赋值为空。建议使…

SAP Business One:无锡哲讯科技助力中小企业数字化转型的智慧之选

数字化转型&#xff0c;中小企业的必经之路 在当今竞争激烈的商业环境中&#xff0c;数字化转型已不再是大型企业的专利&#xff0c;越来越多的中小企业开始寻求高效、灵活的管理系统来优化业务流程、提升运营效率。作为全球领先的企业管理软件&#xff0c;SAP Business One…

【孙悟空喝水】2022-2-7

缘由C编程问题求解:9634: 孙悟空喝水-编程语言-CSDN问答 void 孙悟空喝水() {//缘由https://ask.csdn.net/questions/7639865?spm1005.2025.3001.5141int x 2&#xff0c; n 0; double s 0, ss 0;std::cin >> n;while ((int)s < n)s 1.0 / x, ss (x - 1.0) / …

OCC笔记:BRepMesh_IncrementalMesh的使用

1. 函数接口 2. 线性偏转与角度偏转 2.1. theLineDeflection&#xff1a;线性偏转 根据文档推导下 isRelative传入Standard_True时&#xff0c;theLineDeflection为相对值。 参看isRelative说明 //! param isRelative if TRUE deflection used for discretization of //! ea…

Visual Studio+SQL Server数据挖掘

这里写自定义目录标题 工具准备安装Visual studio 2017安装SQL Server安装SQL Server Management Studio安装analysis service SSMS连接sql serverVisual studio新建项目数据源数据源视图挖掘结构部署模型设置挖掘预测 部署易错点 工具准备 Visual studio 2017 analysis servi…

如何迁移SOS数据库和修改sos服务的端口号

一. 迁移SOS数据库。 1. 对SOS整个库进行拷贝。压缩拷贝等都可以 2. 找到SOS安装目录下的这个目录 /SOS7/SERVERS7/LOCAL/ 在此目录下会发现&#xff0c;有SOS服务库的文件夹。拷贝你要迁移的SOS数据库 3. 进入该文件夹&#xff0c;找到&#xff1a;serverdb.cfg 打开后&…

Oracle向PG转移建议以及注意点

Oracle向PG转移建议以及注意点 ✅ 一、语法差异与迁移建议 1. 包结构&#xff08;Package&#xff09; Oracle 支持 PACKAGE 和 PACKAGE BODY 分离定义。PostgreSQL 不支持包结构&#xff0c;需将每个函数/过程单独定义。 迁移建议&#xff1a; 将 PACKAGE 包中的每个函数…

PCIe-PCI、PCIe中断机制概述

PCI、PCIe中断概述 PCIe 中断机制在继承 PCI 传统中断&#xff08;INTx&#xff09;的基础上&#xff0c;引入了更高效的 MSI/MSI-X 方案&#xff0c;以提升设备性能并减少 CPU 轮询开销。以下是核心要点及技术演进&#xff1a; ⚙️ ​​一、PCIe 中断类型与演进​​ ​​IN…

改进自己的图片 app

1. 起因&#xff0c; 目的: 前面我写过一个图片 app &#xff0c; 最新做了些改动。 把原来的一列&#xff0c;改为3列&#xff0c; 继续使用瀑布流手机上使用&#xff0c;更流畅&#xff0c;横屏显示为2列。 2. 先看效果 3. 过程: 过程太细碎了&#xff0c;这里只是做一下…

【HTML-15】HTML表单:构建交互式网页的基石

表单是HTML中最强大的功能之一&#xff0c;它允许网页收集用户输入并与服务器进行交互。无论是简单的搜索框、登录页面&#xff0c;还是复杂的多步骤调查问卷&#xff0c;表单都是实现这些功能的核心元素。本文将深入探讨HTML表单的各个方面&#xff0c;帮助您构建高效、用户友…

关于智能体接入后端,在Apifox能够传参数给智能体的测试

from flask import Flask, request, jsonify, render_template import requests import json # 用于解析嵌套的 JSON 字符串app Flask(__name__)COZE_BOT_ID 7508736911423963162 COZE_API_KEY pat_cHXqrFzcvtktfmmlp4pjF3O2qmjioQW46uU8UNbUugyvSlFZclklpunc53DbR8ws COZE…

SQL进阶之旅 Day 8:窗口函数实用技巧

【SQL进阶之旅 Day 8】窗口函数实用技巧 在现代数据库开发中&#xff0c;处理复杂的业务逻辑和大规模数据时&#xff0c;仅仅依靠传统的GROUP BY和JOIN操作已经无法满足需求。**窗口函数&#xff08;Window Function&#xff09;**作为SQL标准的一部分&#xff0c;为开发者提供…