列表渲染的三种方式

根据元素 和元素的索引名 就可进行列表渲染

for="{
   {list}}"：list为源数据数组，默认的数组元素名为$item
for="{
   {value in list}}"：value为自定义的数组元素名，默认的数组元素索引名为$idx
for="{
   {(index, value) in list}}"：index为自定义的数组元素索引名，value为自定义的数组元素名

<import name="tabbarpage" src="../Tabbar/index.ux"></import>
<template>
  <div class="tutorial-page">
    <!-- 方式1：默认$item代表数组中的元素, $idx代表数组中的索引 -->
    <div class="tutorial-row" for="{
    {list}}" tid="uniqueId">
      <text>{
    {
    $idx}}.{
    {
    $item.name}}</text>
    </div>
    <!-- 方式2：自定义元素变量名称 -->
    <div class="tutorial-row" for="value in list" tid="uniqueId">
      <text>{
    {
    $idx}}.{
    {
    value.name}}</text>
    </div>
    <!-- 方式3：自定义元素、索引的变量名称 -->
    <div class="tutorial-row" for="(personIndex, personItem) in list" tid="uniqueId">
      <text>{
    {
    personIndex}}.{
    {
    personItem.name}}</text>
    </div>
    <tabbarpage></tabbarpage>
  </div>
</template>

<script>
  export default {
    
    private: {
    
      list: [
        {
     name: 'aa2', uniqueId: 1},
        {
     name: 'bb', uniqueId: 2},
        {
     name: 'cc', uniqueId: 3}
      ]
    },
  }
</script>

<style lang="less">
  .tutorial-page {
    
    flex-direction: column;
    background-color: #ccc;
  }
</style>