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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
javascript数据类型示例分享
Jan 19 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
详解python中的闭包
2020/09/07 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
公务员年总结的自我评价
2013/10/25 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
教务处教学工作总结
2015/08/10 职场文书
合作意向书怎么写
2019/06/24 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android