Vue 知识点：列表渲染 v-for指令

Vue 知识点：列表渲染 v-for指令

结论：
v-for指令：
 1. 用于展示列表数据
 2. 语法：v-for="(item,index) in xxx" :key="index"
 3. 可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

<div id="root">
    //遍历数组
    <h2>人员列表</h2>
    <ul>
       <li v-for="(p, index) in persons" :key="index">
           {{p.name}} - {{p.age}}
       </li>
    </ul>
    
    //遍历对象
    <h2>汽车信息</h2>
    <ul>
       <li v-for="(value, key) in cars" :key="key">
           {{k}} - {{value}}
       </li>
    </ul>

     //遍历字符串
    <h2>测试遍历字符串</h2>
    <ul>
       <li v-for="(char, index) in str" :key="index">
           {{char}} - {{index}}
       </li>
    </ul>

     //遍历指定次数
    <h2>测试遍历指定次数</h2>
    <ul>
       <li v-for="(number, index) in 5" :key="index">
           {{index}} - {{number}}
       </li>
    </ul>
</div>

<script>
    new Vue({
        el:'#root',
        data:{
           persons:[
              {id:'001',name:'张三',age:18},
              {id:'002',name:'李三',age:19},
              {id:'003',name:'王三',age:20},
           ],
           cars:{
              name:'奥迪A6',
              color:'黑色',
              price:'80万'
           },
           str:'hello'
        }
    })
</script>