理解 Vue.js中的v-for功能

我们如果用html去写一个表格是很麻烦的一件事情，需要写很多的tr, th, td, 但是如果我们用了vue.js以后一切就变得如此简单。

下面是pug形式的html:

 table#example2(border='1' cellspacing='0')            tr                th(v-for='head in heads' :style='{width:tWidth, backgroundColor:thColor}') {{head}}            tr(v-for='item in items')                td(v-for='cell in item' :style='{width:tWidth, textAlign:tAlign}') {{cell}}

个人喜欢用pug，因为这会让html看起来更简洁，规整。其实pug也有一些指令操作，实现表格也比较简单，但是由于用了vue，所以就直接抛弃pug的js指令操作了，而只是用它的基础语法来写DOM。

接下来看下Vue的js代码：

new Vue({    el:'#example2',    data:{        items:[            {name:'张三',class:'One', sex:'男',score:'90'},            {name:'李四',class:'Two', sex:'男',score:'80'},            {name:'王五',class:'Three', sex:'女',score:'100'},            {name:'马六',class:'Four', sex:'男',score:'78'},            {name:'赵七',class:'Five', sex:'女',score:'88'}        ],        tWidth:'100px',        tAlign:'center',        thColor:'orange',        tBorder:'2px solid black'    },    computed:{        heads:function(){            return Object.keys(this.items[0]);         }    }})

看下运行结果：

这里用了3个v-for循环遍历了items。

• 表头：得到第一组数据的所有对象属性，然后显示出来就是表头，这里用到了计算属性。
• 表行：遍历items的每条数据,
• 表单元格：遍历items的每条数据的每个对象，显示出表的内容。

是不是很简单？

当然，你需要用express来把pug渲染成html，下面是服务器代码: app.js

var express = require('express');var path = require('path');var app = express();app.engine('pug', require('pug').renderFile);app.set('views', __dirname + '/views');app.set('view engine', 'pug');app.use(express.static(path.join(__dirname, 'public')));app.get('/', function (req, res) {    res.render('pugVue', {title:'icon'});});app.listen(3000);