低代码可视化教你Vue遍历循环绑定

简介: 低代码可视化教你Vue遍历循环绑定

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>


目录
相关文章
|
1天前
|
数据可视化 JavaScript 前端开发
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
9 2
|
1天前
|
缓存 JavaScript UED
vue的动态组件 keep-alive
【10月更文挑战第6天】
9 3
|
1天前
|
JavaScript 开发工具
低代码开发工具教你Vue双向数据绑定
低代码开发工具教你Vue双向数据绑定
8 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1040 0
|
3天前
|
JavaScript 开发者
|
3天前
|
前端开发 JavaScript 开发者
|
1天前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
15 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
23小时前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
10 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
21小时前
|
JavaScript UED
Vue双向数据绑定的原理
【10月更文挑战第7天】
|
2天前
|
JavaScript
vue知识点
10月更文挑战第2天
15 3