微信小程序——for循环遍历

这篇具有很好参考价值的文章主要介绍了微信小程序——for循环遍历。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

以components中创建的ForComp 和pages中的features为例

微信小程序js遍历数组,微信小程序,小程序

features.json

{
    "usingComponents": {
        "if-comp":"/components/IfComp/IfComp",
        "for-comp":"/components/ForComp/ForComp"
    },
    "navigationBarTitleText": "语法特点",
    "navigationBarBackgroundColor": "#FFF",
    "navigationBarTextStyle": "black"
}

 features.wxml

<view>===========条件渲染=============</view>
<if-comp />
<view>===========循环遍历=============</view>
<for-comp />

ForComp.js

Component({
    data:{
        list:["a","b","c"],
        stuList:[
            {id:1,name:"zhang",score:90},
            {id:2,name:"li",score:80},
            {id:3,name:"wang",score:70},
        ]
    }
})

ForComp.wxml

<view>--------使用默认索引、元素-------</view>
<view wx:for="{{list}}" wx:key="*this">
    索引:{{index}} 元素:{{item}}
</view>

<view>--------自定义索引、元素-------</view>
<view wx:for="{{list}}" wx:key="*this" wx:for-index="idx" wx:for-item="v">
    索引:{{idx}} 元素:{{v}}
</view>

<view wx:for="{{stuList}}" wx:key="id">
    索引:{{index}} 元素:{{item.id}} {{item.name}} {{item.score}}
</view>

微信小程序js遍历数组,微信小程序,小程序

注意绿色框出的ws:key=“”,可以参考  列表渲染 | 微信开放文档 (qq.com)

 简单来说就是,当需要遍历的列表是由单个字符串、布尔值等构成时候,使用*this即可。但是当列表是由数组组成的,key需要选取独一无二的那个特性。比如说上面的stuList例子,这个列表由多个学生信息组合而成,一个元素里面包含一个学生的学号、名字、成绩。由于名字、成绩可能会重复,但是学号不会,所以选择 id 作为key

运行效果

微信小程序js遍历数组,微信小程序,小程序

 文章来源地址https://www.toymoban.com/news/detail-714535.html

到了这里,关于微信小程序——for循环遍历的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序for循环嵌套

    wx:for-item=“pro” pro 自定义循环体参数

    2024年04月26日
    浏览(35)
  • 微信小程序和 Vue 中的遍历循环和列表渲染有一些区别。

    在微信小程序中,我们可以使用 wx:for 指令来进行遍历循环,例如: 这里的 items 是一个数组,wx:for 指令会遍历这个数组,并将数组中的每个元素赋值给 item 变量,然后在模板中使用 {{item}} 来显示每个元素的值。wx:key 属性用于指定每个元素的唯一标识符,以便在更新列表时能

    2024年02月09日
    浏览(36)
  • 数组的5种遍历(for循环、for...in、for...of、forEach()、map()

    数组:内存中一块连续的存储单元,这些存储单元具有共同的名称,不同的索引(下标)。 数组5种遍历: 1、for循环        任何数组都可以使用for循环进行遍历,使用频率最高                                 for (let i = 0; i arr.length; i++) {                            

    2024年02月06日
    浏览(46)
  • 微信小程序如何循环控制一行显示几个wx:for

    正如上图所显示的一样,我们改如何控制一行显示几个图形呢? 首先第一种方法,数量少的可以自己一行一行的写,但是当数据很多的时候呢? 这时候就需要我们区使用循环进行代码的编写。废话不多数,直接写代码。 .demo-item{ width: 40%; } .demo-item .screen-data{ padding: 10rpx; te

    2024年02月09日
    浏览(49)
  • 微信小程序的条件判断wx:if、wx:elif以及for循环wx:for

    微信小程序中的条件判断与vue的v-if、v-else语法相似,其语法格式为: 直接实战: 官方文档是这么定义的: **重点1:默认数组当前项的变量名为:item;默认数组当前项的下标变量名为index; **重点2:如果不想使用默认的名:按照以下操作自定义变量名 本人习惯使用默认,实

    2024年02月14日
    浏览(42)
  • 【Python】列表 List ⑦ ( 列表遍历 | 使用 while 循环遍历列表 | 使用 for 循环遍历列表 | while 循环 与 for 循环对比 )

    将 列表 容器 中的数据元素 , 依次逐个取出进行处理的操作 , 称为 列表的遍历 ; 使用 while 循环 遍历 列表容器 : 元素访问方式 : 使用 下标索引 访问 列表中的元素 ; 循环控制 : 循环控制变量 : 用于指示当前循环的 下标索引 ; 循环条件 : 设置为 循环控制变量 ( 下标索引 ) 列表

    2024年02月06日
    浏览(57)
  • 微信小程序中遍历对象

    今天在写小程序的时候,遇见一个需求,当用户下单时,生成的订单中可能会存在过期或者不能购买的产品,后端返回的是一个对象:(产品id+错误码), 所以就得循环返回的对象,找出对应的商品 一、 先定义对象数据 二:执行遍历方法:

    2024年02月14日
    浏览(33)
  • 微信小程序 - wx:for 循环渲染多个 “重复“ 子组件(仅子组件 id 不同,this.selectComponent 使用时依然能准确找到子组件)将子组件 id 设为动态每个子组件都是独立的!

    本教程更多版本:Vue.js | uni-app 我们会通过给组件绑定 id 值,然后通过 this.selectComponent(‘xxx’) 来获取这个组件实例,从而访问子组件方法和变量。 如果 在 wx:for 中循环渲染组件(绑定固定 id),那么这个 id 就会 “一摸一样”,导致根本无法找到(this.selectComponent 谁?),

    2024年02月15日
    浏览(34)
  • 抛弃for循环遍历list

    Java 8 API添加了一个新的抽象称为流Stream,可以让你以一种声明的方式处理数据。 Stream 使用一种类似用 SQL 语句从数据库查询数据的直观方式来提供一种对 Java 集合运算和表达的高阶抽象。 filter filter:过滤,就是过滤器,符合条件的通过,不符合条件的过滤掉 map map:映射,

    2024年02月20日
    浏览(38)
  • Golang for循环遍历小坑

    循环:让程序多次执行相同的代码块 for循环是Go语言中唯一一个循环结构 for循环经典语法 先执行表达式1 执行表达式2判断是否成立,如果成立执行循环体 循环体执行完成后,执行表达式3 再次执行表达式2,判断是否成立. for循环用的最多的地方就是遍历数组或切片等 经典for循环结

    2024年02月03日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包