在Vue中，循环遍历通常使用v-for指令。这个指令基于一个数组来渲染一个列表。你可以用它来展示数据列表，如用户列表、商品列表等。每个从数组中渲染的元素都有它自己的索引，Vue也会为它们提供一个唯一的key值（虽然不是必须的，但强烈推荐使用以提高渲染性能）。
写代码实现循环遍历绑定
假设你有一个数组items，你想要在页面上展示这个数组的所有元素：
<template> <div> <ul> <li v-for="(item, index) in items" :key="index"> {{ item.text }} </li> </ul> </div> </template> <script> export default { data() { return { items: [ { text: '苹果' }, { text: '香蕉' }, { text: '橙子' } ] } } } </script>
在这个例子中，v-for="(item, index) in items"表示对items数组进行遍历，每次循环将数组元素赋值给item，索引赋值给index。:key="index"为每个元素指定了一个唯一的key值，这里使用索引作为key，但在实际开发中，如果列表元素可能会发生变化（如排序、添加、删除），最好使用唯一标识符作为key值。
低代码可视化工具实现双向绑定
DIY可视化实现
定义数据
在可视化组件扩展数据里，输入items整个JSON结构数据进去。
绑定变量
找到我们要选择绑定的FLEX，进行循环绑定。
绑定显示的文本
拖动文本内容至FLEX组件里，进行循环绑定显示内容。
执行结果
样式优化
生成源码
<template> <view class="container container329152"> <view class="flex flex-wrap diygw-col-24 flex-direction-column"> <view v-for="(item, index) in items" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz"> <text class="diygw-col-24"> {{ item.text }} </text> </view> </view> <view class="clearfix"></view> </view> </template> <script> export default { data() { return { //用户全局信息 userInfo: {}, //页面传参 globalOption: {}, //自定义全局变量 globalData: {}, items: [{ text: '苹果' }, { text: '香蕉' }, { text: '橙子' }] }; }, onShow() { this.setCurrentPage(this); }, onLoad(option) { this.setCurrentPage(this); if (option) { this.setData({ globalOption: this.getOption(option) }); } this.init(); }, methods: { async init() {}, // 新增方法 自定义方法 async testFunction(param) { let thiz = this; console.log(this.checkbox); } } }; </script> <style lang="scss" scoped> .flex1-clz { margin-left: 10rpx; padding-top: 10rpx; padding-left: 10rpx; width: calc(100% - 10rpx - 10rpx) !important; padding-bottom: 10rpx; margin-top: 10rpx; margin-bottom: 10rpx; border-bottom: 2rpx solid #eee; margin-right: 10rpx; padding-right: 10rpx; } .container329152 { } </style>
