提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

案例循环应用数据 for 渲染 指导
2023-09-11 14:17:16 时间

​问题背景：

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

相关文章