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的表格操作插件
Apr 22 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
详解anaconda安装步骤
2020/11/23 Python
关于Assembly命名空间的三个面试题
2015/07/23 面试题
教师节促销活动方案
2014/02/14 职场文书
单位授权委托书范本
2014/09/26 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
Django migrate报错的解决方案
2021/05/20 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
JS实现数组去重的11种方法总结
2022/04/04 Javascript