v-for循环遍历

使用v-for遍历不同类型

<div id="root">
    <!--遍历数组-->
    <ul>
        <li v-for="(item,index) in persons" :key="index">
        {{item.name}}------{{item.age}}
        </li>
    </ul>
    <!--遍历对象-->
     <ul>
        <li v-for="(value,k) in car" :key="k">
        {{k}}------{{value}}
        </li>
    </ul>
    <!--遍历字符串-->
      <ul>
        <li v-for="(char,index) in str" :key="index">
        {{index}}------{{char}}
        </li>
    </ul>
    <!--遍历指定次数-->  <ul>
        <li v-for="(number,index) in 5" :key="index">
        {{index}}------{{number}}
        </li>
    </ul>
</div>

<script>
    export default{
             data(){
                return{
                    persons:[
                        {name:'张三',age:'18'},
                        {name:'李四',age:'19'}
                        {name:'王五',age:'20'}
                    ]，
                    car:{
                        type:'奥迪A6',
                        color:'黑色'
                    },
                    str:'hello'
                  }
          }
      } 
</script>

v-for指令

1. 用于展示列表数据
2. 语法：v-for=“(item,index) in xxx” :key=“yyy”
3. 可遍历：数组、对象、字符串、指定次数