Three methods of list rendering

According to the element And the index name of the element You can render the list

for="{
   {list}}"：list For the source data array , The default array element name is $item
for="{
   {value in list}}"：value For the custom array element name , The default array element index name is $idx
for="{
   {(index, value) in list}}"：index Index names for custom array elements ,value For the custom array element name 

<import name="tabbarpage" src="../Tabbar/index.ux"></import>
<template>
  <div class="tutorial-page">
    <!--  The way 1： Default $item Represents the elements in an array , $idx Represents the index in the array  -->
    <div class="tutorial-row" for="{
    {list}}" tid="uniqueId">
      <text>{
    {
    $idx}}.{
    {
    $item.name}}</text>
    </div>
    <!--  The way 2： Custom element variable name  -->
    <div class="tutorial-row" for="value in list" tid="uniqueId">
      <text>{
    {
    $idx}}.{
    {
    value.name}}</text>
    </div>
    <!--  The way 3： Custom elements 、 Variable name of the index  -->
    <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>