​問題背景：

快應用中執行for指令進行迴圈渲染，資料不生效，如何處理？

解決方案：

for渲染不生效通常是for的寫法出現問題導致的，檢查for迴圈的寫法是否出現問題，支援的寫法如下（其中{{}}可以省略）：

1、"fn"：for="list"：list為陣列物件，預設元素變數為$item。

<template>

    <div class="list-container">

      <div for="{{list}}" tid="id">

         <text>{{$idx}}</text>

         <text>{{$item.id}}</text>

      </div>

      <div for="value in 7">

         <text>{{value}}</text>

      </div>

    </div>

</template>

<script>

    module.exports= {

        data: {

            list: [{id:1}, {id:2}]

        }

    }

</script>
 

2、"for="value in list"：value為自定義的元素變數，預設元素索引為$idx。

<template>

    <div class="list-container">

      <div "for="value in list" tid="id">

         <text>{{$idx}}</text>

         <text>{{$item.id}}</text>

      </div>

      <div for="value in 7">

         <text>{{value}}</text>

      </div>

    </div>

</template>

<script>

    module.exports= {

        data: {

            list: [{id:1}, {id:2}]

        }

    }

</script>
 

3、"for="(index,value) in list"：index為元素索引，value為元素變數。

<template>

    <div class="list-container">

      <div "for="(index,value) in list" tid="id">

         <text>{{$idx}}</text>

         <text>{{$item.id}}</text>

      </div>

      <div for="value in 7">

         <text>{{value}}</text>

      </div>

    </div>

</template>

<script>

    module.exports= {

        data: {

            list: [{id:1}, {id:2}]

        }

    }

</script>
 

容易出錯的是第三種用法，需要特別注意與Vue不同，“for="(index,value) in list”的寫法中，index需要放在第一位。

​欲瞭解更多更全技術文章，歡迎訪問https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh