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 相关文章推荐
js中格式化日期时间型数据函数代码
Nov 08 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
对比分析json及XML
Nov 28 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
javascript中caller和callee详解
Aug 10 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 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
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
用PHP动态创建Flash动画
2006/10/09 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
深入浅析php json 格式控制
2015/12/24 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
用js遍历 table的脚本
2008/07/23 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
es6数据变更同步到视图层的方法
2019/03/04 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python 实现表情识别
2020/11/21 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
美术专业个人自我评价
2014/01/18 职场文书
教师演讲稿开场白
2014/08/25 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
2016年教师节感言
2015/12/09 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript