【快应用】for循环数据不渲染指导案例

原创

华为开发者论坛 2022-12-09 09:19:26 博主文章分类：快应用 ©著作权

文章标签 for循环解决方案数组 文章分类 移动开发

©著作权归作者所有：来自51CTO博客作者华为开发者论坛的原创作品，请联系作者获取转载授权，否则将追究法律责任

问题背景：

快应用中执行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>

【快应用】for循环数据不渲染指导案例_数组

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>

【快应用】for循环数据不渲染指导案例_for循环_02

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>