vue-05列表渲染自学视频教程

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in list 形式的特殊语法，list是源数据数组并且 item 是数组元素迭代的别名。

  基本用法  

html

<li v-for="item in list">
  {{item}}
</li>

js

var app=new Vue({
el:'#app',
data:{
list:['angular','react','vue',jquery]
  }
})

  对象循环输出  

我们经常需要在循环的时候元素是一个对象

html

<liv-for="item in list">
  {{item.name}}--{{item.age}}
</li>

js

var app=new Vue({
el:'#app',
data:{
list:[
         {name:"mumu", age:18},
         {name:"zql", age:22},
         {name:"曾庆林", age:28},
      ]
  }
})

  索引 

有时候我们需要知道当前循环元素的索引下标

<liv-for="(item, index) in list">
  {{item.name}}-{{index}}-{{item.age}}
</li>

 结果是

<li>mumu-0-18</li>
<li>zql-0-22</li>
<li>曾庆林-0-28</li>

  key  

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。

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

var app=new Vue({
el:'#app',
data:{
items:['mumu','曾庆林','木木','mumu']
  }
})

 如果不绑定tip 重复的'元素' 再列表循环在列表循环会警告