Vue.js实现表格渲染的方法
我们大多时候渲染表格都是key值在页面上写死的情况下,一个个value渲染,那我们遇到数据是键值对的时候该如何渲染呢?
我们查看vue的官方文档,如下:
值域 v-for
v-for 也可以接收一个整数,此时它将重复模板数次。
<div> <span v-for="n in 10">{{ n }} </span> </div>
结果:
那我们就可以通过如下方法来渲染列表:
<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实现表格渲染的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
详解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 的条件渲染和列表渲染
这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记. 条件渲染 v-if 在 < template > 中配合 v-if 渲染一整组 在使用 v-if 控制元素的时候,我们需要将它添加到这个元素上去.然而如果要切换很多元素的时候,一个个的添加就太麻烦了.这时候就可以使用 < template > 将一组元素进行包裹,并在上面使用 v-if.最终的渲染结果不会包含 < template > 元素. <template
-
Vue.js学习教程之列表渲染详解
本文主要给大家介绍了关于Vue.js列表渲染的相关资料,分享出来给大家参考学习,下面来看看详细的介绍: v-for 可以使用 v-for 指令基于一个数组渲染一个列表.这个指令使用特殊的语法,形式为item in items,items 是数据数组,item 是当前数组元素的别名: 示例: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li>
-
vue.js实现条件渲染的实例代码
一.初探条件渲染 vue 的条件渲染,仍旧依赖于指令系统,下面逐个介绍: (1)v-if <div id="app"> <div v-if="c1">c1</div> </div> ...... var app = new Vue({ el: '#app', data: { c1: false } }); 当 c1 为真值的时候,渲染出 v-if 所绑定的元素,否则不渲染出该元素.渲染结果如下: <div id=
-
Vue.js实现表格渲染的方法
我们大多时候渲染表格都是key值在页面上写死的情况下,一个个value渲染,那我们遇到数据是键值对的时候该如何渲染呢? 我们查看vue的官方文档,如下: 值域 v-for v-for 也可以接收一个整数,此时它将重复模板数次. <div> <span v-for="n in 10">{{ n }} </span> </div> 结果: 那我们就可以通过如下方法来渲染列表: <table class="table table
-
利用vue.js插入dom节点的方法
本文主要介绍的是vue.js插入dom节点的方法,下面话不多说,来看看详细的介绍吧. html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '<div>Hello World</div>' }) var myAppendTo = Vue.extend({ template:'<p>appendTo</p>' }) va
-
Vue.js+Layer表格数据绑定与实现更新的实例
一:先使用Vue.js绑定好数据与更新事件 使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据 <div id="content"> <table class="mytable"> <tr class="header"> <td>选择</td> <td>用户名</td> <td>学号</td>
-
Vue 自适应高度表格的实现方法
前言 示例版本为 Element-ui 2.13.1 + Vue 2.6.11 本人是做后台开发的,由于公司业务要求需要将前后台模块进行分离,两年前选择使用vue-element-admin项目进行前台的开发,该框架集成了很多功能,特别适合对 Vue 很陌生的新手,公司项目组成员接受程度普遍较高. 在使用过程中 表格 是必不可少的一个控件,用于展示数据,单页数据量过多就会导致浏览器自动生成右侧滚动条. 如果页面有头部信息或查询按钮,移动滚动条后会遮挡住这些操作和信息内容. Element-UI
-
vue.js声明式渲染和条件与循环基础知识
vue.js声明式渲染和条件与循环的具体内容,分享给大家 绑定 DOM 元素文本值 html代码: <div id="app"> {{ message }} </div> JavaScript代码: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 运行结果:Hello Vue! 总结:数据和 DOM 已经被关联在一起,当我们改变app.message的数据,所渲染的的DOM元素
-
vue.js实现价格格式化的方法
这里分享一个常用的价格格式化的一个方法,在电商的价格处理中非常的实用,我们可以看一个效果 这里在价格数据的地方使用了一个过滤器,通过这个过滤器对价格做了保留小数位的处理. HTML <div class="price"> <span v-html="goods.sale_price|format"></span> <span class="price-before">¥{{"这里是价格数据"}}&l
-
vue.js实现备忘录功能的方法
这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~ demo原github地址:https://github.com/vuejs/vue) 一.实现效果 二.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>备忘录&l
-
vue jsx 使用指南及vue.js 使用jsx语法的方法
vue jsx 语法与 react jsx 还是有些不一样,在这里记录下. let component = null// if 语句 if (true) { component = ( <div></div> ); } else { component = ( <div></div> ); } var ul = ( <ul> {component} </ul> ); // map 语句 var coms = limit.map
-
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
一.写在前面 1. Bootstrap是一个由 Twitter 开发和维护的前端框架,目前很受欢迎,Bootstrap中文网点击这里. 2. Vue.js 是一套构建用户界面的渐进式框架,点这里访问官网. 二.实现效果: 三.页面引入bootstrap.vue资源 <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="e
-
Vue.js 中的实用工具方法【推荐】
收集日常开发中常用到的一些工具方法, 包含 vue 的公用过滤器.公用指令等 (PS: 懒人养成记) 公用自定义过滤器 import Vue from 'vue' import moment from 'moment' /** * @filter dateFormat 时间格式化 * @param {String, Date} value 可被 new Date 解析的字符串 * @param {String} formatStr moment 的 format 字符串 * 使用方法 {{ 20
随机推荐
- PHP 使用MySQL管理Session的回调函数详解
- AJAX中文乱码PHP中完美解决方法
- Go语言的管道Channel用法实例
- JS循环遍历JSON数据的方法
- 正则表达式的使用 ASP
- Win7 64位下PowerDesigner连接64位Oracle11g数据库
- JS中使用apply方法通过不同数量的参数调用函数的方法
- 加密web.config的方法分享
- 配置最新的PHP加MYSQL服务器
- Python中用于转换字母为小写的lower()方法使用简介
- python实现带声音的摩斯码翻译实现方法
- 用js来生成随机彩票号码清单
- C++ COM编程之什么是组件?
- 一个日历,兼容多种浏览器
- js实现select跳转菜单新窗口效果代码分享(超简单)
- tc711.com为您提供免费论坛空间服务
- Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
- android实现简单左滑删除控件
- Java基础学习笔记之数组详解
- 浅谈bootstrap layer.open中end的使用方法