公司门户网站建设,本地网站有什么可以做,蓝海网站建设,网页制作教程视频自学ForEach循环渲染#xff1a;
参数#xff1a;
要循环遍历的数组#xff0c;Array类型遍历的回调方法#xff0c;Function类型为每一项生成唯一标识符的方法#xff0c;有默认生成方法#xff0c;非必传
使用示例#xff1a;
interface Item {name: String,price: N…ForEach循环渲染
参数
要循环遍历的数组Array类型遍历的回调方法Function类型为每一项生成唯一标识符的方法有默认生成方法非必传
使用示例
interface Item {name: String,price: Number
}Entry
Component
struct Index {private arr:ArrayItem [{name: 华为 Meta 50, price: 6999},{name: 华为 Meta 60 pro, price: 7999},{name: 华为 Meta X5, price: 12999},];build() {Column({space: 30}) {ForEach(this.arr,item{Row(){Column() {Text(item.name).fontWeight(FontWeight.Bold).margin({bottom: 10})Text( item.price)}}.width(100%).backgroundColor(#FFF).padding(20)})}.height(100%).backgroundColor(#999).justifyContent(FlexAlign.Center)};
}
效果展示 if判断渲染
使用示例
interface Item {name: String,price: Number,discount?: Number
}Entry
Component
struct Index {private arr:ArrayItem [{name: 华为 Meta 50, price: 6999, discount: 6666},{name: 华为 Meta 60 pro, price: 7999},{name: 华为 Meta X5, price: 12999},];build() {Column({space: 30}) {ForEach(this.arr,item{Row(){Column() {if(item.discount){Text(item.name).fontWeight(FontWeight.Bold).margin({bottom: 10})Text(原价 item.price).fontSize(14).decoration({ type: TextDecorationType.LineThrough })Text(折扣价 item.discount).textAlign(TextAlign.Start)Text(补贴 (item.price - item.discount)).textAlign(TextAlign.Start)}else{Text(item.name).fontWeight(FontWeight.Bold).margin({bottom: 10})Text( item.price)}}}.width(100%).backgroundColor(#FFF).padding(20)})}.height(100%).backgroundColor(#999).justifyContent(FlexAlign.Center)};
}
效果展示
