列表渲染指令v-for

v-for

预期：Array | Object | number | string | Iterable (2.6 新增)

用法：

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名，另外也可以为数组索引指定别名 (或者用于对象的键)。

1.v-for与数组

（其实就是遍历数组）

语法：

<li v-for="item in message">{{item}}</li><li v-for="(item,index) in message">{{item}}-{{index}}</li>

具体情况如下：

<div id="app"> <ul> <li v-for="item in message">{{item}}</li> </ul> </div>

message为数组名，item为自定义名称，不过item in 数组名要和{{item}}相符。

<script> const app=new Vue({ el:'#app', //用于管理要挂载的数据 data:{ //定义数据 message:['藤原千花','四宫辉夜','白银御行'] } }); </script>

结果如下： 除去数组元素，也可以显示数组索引（index），代码如下：

<div id="app"> <ul> <li v-for="(item,index) in message">{{item}}-{{index}}</li> </ul> </div>

结果如下：

2.v-for与对象

<div id="app"> <ul> <li v-for="value in object">{{value}}</li> </ul> </div> <script> const app=new Vue({ el:'#app', //用于管理要挂载的数据 data:{ //定义数据 object:{ name:'藤原千花', birth:'3月3日', sex:'女' } } }); </script>

与数组类似。不同的是，在第二个参数上，不是index索引，而是name键名，第三个参数为index索引。 如下所示：

<div id="app"> <ul> <li v-for="(value,name,index) in object">{{value}}-{{name}}-{{index}}</li> </ul> </div>

3.v-for与key属性

官方推荐使用v-for指令时，绑定一个key属性。

key的意义在于更高效的更新虚拟DOM。

语法： <div v-for="item in items" v-bind:key="item.id"> <!-- 内容 --> </div> 意义 由于Diff算法； 无：key属性时，状态默认绑定的是位置； 有：key属性时，状态根据key的属性值绑定到了相应的数组元素。 （具体情况待补充）