Vue中v-for的数据分组实例

使用Vue.js可以很方便的实现数据的绑定和更新，有时需要对一个一维数组进行分组以方便显示，循环可以直接使用v-for，那分组呢？这里需要用到vue的computed特性，将数据动态计算分组。

代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <meta charset="utf-8" />
 <script src="Scripts/vue.js"></script>
</head>
<body>
 <!--这是我们的View-->
 <div id="app">
  <table>
   <tbody>
    <tr v-for="(row,i) in listTemp">
     <td v-for="(cell,j) in row">
      <div :id="'T_'+(i*3+j)">Data-{{cell}}</div>
     </td>
    </tr>
   </tbody>
  </table>
 </div>
</body>
</html>
<script src="Scripts/vue.js"></script>
<script>
 // 创建一个 Vue 实例或 "ViewModel"
 // 它连接 View 与 Model
 new Vue({
  el: '#app',
  data: {
   list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
  },
  computed: {
   listTemp: function () {
    var list = this.list;
    var arrTemp = [];
    var index = 0;
    var sectionCount = 3;
    for (var i = 0; i < list.length; i++) {
     index = parseInt(i / sectionCount);
     if (arrTemp.length <= index) {
      arrTemp.push([]);
     }
     arrTemp[index].push(list[i]);
    }
    return arrTemp;
   }
  },
 })
</script>

在computed中以3个元素为一组来动态分组，在绑定数据的地方使用嵌套的v-for循环，结果如下图(3列4行)

这里还对包裹数据的每个div的id作了特别的处理，动态产生id，每个id都有一个字符串前缀T，后面是数据的索引，索引采用i*3+j计算获得，以便于对应到原始的数据list。

以上这篇Vue中v-for的数据分组实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 详解vuejs之v-for列表渲染
  • VUE中v-model和v-for指令详解
  • 浅谈vue.js中v-for循环渲染
  • vue.js指令v-for使用及索引获取
赞 (0)

相关推荐

  • 详解vuejs之v-for列表渲染

    详解vuejs之v-for列表渲染

    Vue.js是一个构建数据驱动的web界面的库.重点集中在MVVM模式的ViewModel层,因此非常容易与其它库或已有项目整合 Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单 如下列表展示,当我们从后端接口或者json文件使用ajax获取数据之后现实到页面,我们有n中方式去把数据渲染到页面 1.使用js的for循环去遍历填充 2.ng的ng-repeat 今天我们使用vue.js的v-for 一.html <div class="shop_list_box

  • VUE中v-model和v-for指令详解

    VUE中v-model和v-for指令详解

    1.基本雏形 <!DOCTYPE html> <html> <head> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue

  • vue.js指令v-for使用及索引获取

    vue.js指令v-for使用及索引获取

    1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <

  • 浅谈vue.js中v-for循环渲染

    浅谈vue.js中v-for循环渲染

    这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="

  • vue中for循环更改数据的实例代码(数据变化但页面数据未变）

    废话不多说了,直接给大家贴代码了,具体代码如下所示: let that = this; for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tabl

  • Vue中v-for的数据分组实例

    使用Vue.js可以很方便的实现数据的绑定和更新,有时需要对一个一维数组进行分组以方便显示,循环可以直接使用v-for,那分组呢?这里需要用到vue的computed特性,将数据动态计算分组. 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

  • vue组件中使用props传递数据的实例详解

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • angularJs中$http获取后台数据的实例讲解

    1.html <div ng-app="module" ng-controller="ctrl"> <table border="1" width="600"> <tr> <td>网站名称</td> <td>网址</td> </tr> <tr ng-repeat="v in data"> <td

  • 详解vue中使用transition和animation的实例代码

    以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10

  • C#中WPF ListView绑定数据的实例详解

    C#中WPF ListView绑定数据的实例详解

    C#中WPF ListView绑定数据的实例详解 WPF中ListView用来显示数据十分方便, 我们可以将它分成几个列,每一个列用来显示一条数据,但是又是在一方之中. 那么怎样实现这样的效果的呢,这就要用绑定了. 我们先来看一看他的xmal代码 <ListView Name="receiveList" Grid.Row="0"> <ListView.View> <GridView> <GridView.Columns>

  • Vue中遍历数组的新方法实例详解

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key

  • vue中的面包屑导航组件实例代码

    vue的面包屑导航组件 用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat

  • vue中实现先请求数据再渲染dom分享

    在项目中遇到了一个问题,下面是vue template中的代码: 我之前的写法是 这样做的结果是下面取dom的操作,取到的dom都是undefined,也就是没有取到. 原因是并没有按照 请求数据->渲染dom->获取dom的顺序执行,实际的执行顺序是 先获取dom,而此时数组option中还是空的,上面的v-for循环也就没有渲染出dom,所以根本取不到(不理解是为什么) 后来我又把请求数据写在了created函数中,把取dom的操作写在mounted函数中,竟然还是先执行取dom的操作(是

随机推荐