Vue.js实现表格渲染的方法


Posted in Javascript onSeptember 07, 2018

我们大多时候渲染表格都是key值在页面上写死的情况下,一个个value渲染,那我们遇到数据是键值对的时候该如何渲染呢?

我们查看vue的官方文档,如下:

值域 v-for

v-for 也可以接收一个整数,此时它将重复模板数次。

<div>
 <span v-for="n in 10">{{ n }} </span>
</div>

结果:

Vue.js实现表格渲染的方法

那我们就可以通过如下方法来渲染列表:

<table class="table table-bordered">
  <tbody>
  <tr v-for="n in items.length/2">
   <td>{{items[2*n].user}}</td>
   <td>{{items[2*n].msg}}</td>
   <td>{{items[2*n+1].user}}</td>
   <td>{{items[2*n+1].msg}}</td>
  </tr>
  </tbody>
 </table>
export default {
  data() {
   return{
    items: [
     {user:'A',msg:'1'},
     {user:'B',msg:'2'},
     {user:'C',msg:'3'},
     {user:'D',msg:'4'},
     {user:'E',msg:'5'},
     {user:'F',msg:'6'},
    ]
   }
  }
 }

效果如下:

Vue.js实现表格渲染的方法

可以通过更改数组长度除以的数值来实现列数的调整!

以上这篇Vue.js实现表格渲染的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
vue基于element的区间选择组件
Sep 07 #Javascript
vue-cli监听组件加载完成的方法
Sep 07 #Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 #Javascript
vue加载完成后的回调函数方法
Sep 07 #Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 #Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 #Javascript
详解JavaScript事件循环机制
Sep 07 #Javascript
You might like
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
PHP实现的策略模式示例
2019/03/20 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
在Python下尝试多线程编程
2015/04/28 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python实现翻转数组功能示例
2018/01/12 Python
python tornado微信开发入门代码
2018/08/24 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
python连接mongodb集群方法详解
2020/02/13 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
道德模范先进事迹
2014/02/14 职场文书
幼儿园辞职书
2015/02/26 职场文书
地雷战观后感
2015/06/09 职场文书
职工宿舍管理制度
2015/08/05 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers