低代码可视化教你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 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
14 7
|
1天前
|
JavaScript 前端开发 开发者
Vue 的优缺点
【10月更文挑战第16天】Vue 具有众多优点,使其成为前端开发中备受青睐的框架之一。尽管它也存在一些局限性,但通过合理的应用和技术选型,这些问题可以得到一定程度的解决。在实际项目中,开发者可以根据项目的需求和特点,权衡 Vue 的优缺点,选择最适合的技术方案。同时,随着 Vue 不断的发展和完善,相信它将在前端开发领域继续发挥重要作用。
12 6
|
1天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
15 6
|
2天前
|
JavaScript 索引
vue 在 v-for 时给每项元素绑定事件
在 Vue 中使用 v-for 渲染列表时,可以通过给每项元素绑定事件来实现交互功能。通常使用 `@click` 等事件修饰符,结合方法或内联表达式来处理事件。例如:`&lt;li v-for=&quot;item in items&quot; @click=&quot;handleClick(item)&quot;&gt;{{ item }}&lt;/li&gt;`。
|
3天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
29 7
|
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.
1043 0
|
3天前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
15 1
|
2天前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说,动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性,它们为我们提供了更灵活和高效的组件管理方式,使我们能够更好地构建复杂的应用界面。深入理解和掌握它们,以便在实际开发中能够充分发挥它们的优势,提升我们的开发效率和应用性能。
29 18
|
3天前
|
JavaScript 索引
如何在 Vue 中动态地添加或删除 Mixin
【10月更文挑战第18天】通过以上的分析和探讨,相信你对如何在 Vue 中动态地添加或删除 Mixin 有了更深入的理解。在实际开发中,你可以根据具体的需求和场景,灵活运用这些方法,以实现更加灵活和高效的应用开发。
11 4
|
2天前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
15 2