ForEach循环渲染
详见链接:
https://www.malaoshi.top/show_1GW570S1SaU.html
代码
// 定义数据类型
interface Option {
label: string;
checked: boolean;
};
@Entry
@Component
struct Index {
// 定义爱好数组
@State aihao: Option[] = [
{ label: '王者荣耀', checked: false },
{ label: '吃鸡', checked: false },
{ label: '抖音', checked: false }
];
build() {
Column() {
Row(){
Text("爱好:")
}
.width("100%")
ForEach(this.aihao, (item:Option,index:number) => {
Row(){
Checkbox()
.select(item.checked) // 此时不能用双向绑定
.onChange( value => {
item.checked = value // 改变勾选状态时复制
})
Text(item.label)
}
.width("100%")
})
Button("获取值")
.onClick( ()=>{
for(let item of this.aihao){
console.log("", JSON.stringify(item) )
}
})
}
}
}