这几天慢慢的开始写了一些界面，一些简单的跳转逻辑处理等，还是很有成就感的， 昨天呢，写到了这样的一个界面：
第一反应，iview里面的Tabs标签页嵌套Card，然后根据数据源显示不同的数据，说干就干，开始了堆代码：
效果也很好，是我想要的：
但是呢， 写完我就泄气了，这又不是写demo，这样写还怎么动态创建， 怎么动态显示内容啊~ 白写/(ㄒoㄒ)/~~
那怎么办呢？
js语言虽然我不熟练， 但是往哪里思考我有大量经验啊，这样的界面，放Objective-C语言下， 就是一个UITableView的事情， 如果不用tableView， 那也就是根据数据源进行一个for循环创建嘛。
根据数据源进行for循环创建， 可行~
那究竟怎么做呢？使用v-for指令进行列表渲染啊！！！
- 用v-for把一个数组对应为一组元素
我们用
v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。
如下截图是vue.js官网上的案例：
由此我们可以看出，items可以作为我们的数据源为我们提供界面所需要数据， 我们只需要使用v-for将列表进行渲染，很简单的样子哈哈~
真的是这样吗？ 我又往下翻了翻官方文档描述：
当 Vue.js 用
v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的track-by="$index"。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一
key属性。理想的key值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的track-by，但它的工作方式类似于一个属性，所以你需要用v-bind来绑定动态值。
官方给了个示例，如下：
这下子我清晰了~
直接上代码吧：
从上面代码可以看出， 上面我们用一个div标签包裹card， 然后对整个div代码块使用v-for指令渲染， 使用v-bind绑定数据源；
在script中返回我们的messages数据源， 这里的数据到时候可以替换为我们请求回来的动态数据， 如此简单就解决了， 开心开心~~~
