这几天慢慢的开始写了一些界面,一些简单的跳转逻辑处理等,还是很有成就感的, 昨天呢,写到了这样的一个界面:
第一反应,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数据源, 这里的数据到时候可以替换为我们请求回来的动态数据, 如此简单就解决了, 开心开心~~~