Vue初体验 | v-for循环创建视图块

这几天慢慢的开始写了一些界面，一些简单的跳转逻辑处理等，还是很有成就感的， 昨天呢，写到了这样的一个界面：

第一反应，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数据源， 这里的数据到时候可以替换为我们请求回来的动态数据， 如此简单就解决了， 开心开心~~~