Vue实现简单的列表增加与删除填坑总结

简单的列表增加与删除填坑总结"/>

Vue实现简单的列表增加与删除填坑总结

学习Vue也有快一周的时间了，技痒难耐想做个小DEMO测试下水平，正好看到keepfool的一篇博文：“Vue.js——60分钟快速入门”

链接：.html

文章最后有个demo

功能不难正好适合初学者练手，于是在不看作者代码的情况下复刻一份出来。

首先说说思路，界面结构不难，通过两个input和一个select单选框获得用户信息添加一列到table末尾，同时每列数据都能通过button删除。

遇到的第一个坑在于如何实现隔行变色?

以往用原生js写的思路是循环整个tr，然后求余添加奇偶class；vue是否也可以用类似想法呢？

<tr v-for="person in people">这是基本的遍历语句，其中people是我在viewModel中的数组对象：

data: {
people: [
{
name: 'Jack',
age: '30',
gender: 'Male'
},
{
name: 'Rose',
age: '27',
gender: 'Female'
},
{
name: 'Chris',
age: '46',
gender: 'Male'
},
{
name: 'Faya',
age: '19',
gender: 'Female'
}
]
}

那么问题就来了，如何找到一种用来标识数据顺序的变量呢？

在官网v-for章节可以看到这么一段：

v-for 还支持一个可选的第二个参数为当前项的索引。