使用 repeat.for 使用循环
循环遍历 viewmodel 内部的可迭代或作为可绑定(如果自定义属性或自定义元素)传递可以像这样完成。
一个字符串值数组
export class MyViewModel {
myIterable = ['String 1', 'String 2', 'String 3', 'String 4'];
}
<template>
<div repeat.for="item of myIterable">${item}</div>
</template>
一组对象
export class MyViewModel {
myIterable = [
{name: "John Citizen", age: 42},
{name: "Maxwell Smart", age: 75},
{name: "Gary TwoShoes", age: 51}
];
}
<template>
<div repeat.for="item of myIterable">
<strong>Name:</strong> ${item.name}<br>
<strong>Age:</strong> ${item.age}
</div>
</template>
一张地图
export class MyViewModel {
myIterable = null;
constructor() {
this.myIterable = new Map();
this.myIterable.set(0, 'My Value');
this.myIterable.set(1, 'Something Different');
this.myIterable.set(2, 'Another String #32837');
}
}
<template>
<div repeat.for="[id, item] of myIterable">
${id}<br>
${item}
</div>
</template>
一个数字循环
<template>
<div repeat.for="i of 10">${i}</div>
</template>