列表渲染（基本）

一、基本列表渲染

  v-for指令

            1. 用于展示列表数据

            2. 语法(v-for="item, index"）in xxx  :key="yyy"

            3.可以遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

① 遍历数组 

<div id="root">
 <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) of persons" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
<div>
  new Vue({
            el: '#root',
            data: {
                persons: [{
                    id: "001",
                    name: "张三",
                    sex: '男',
                    age: 18
                }, {
                    id: "002",
                    name: "李四",
                    sex: '男',
                    age: 28
                }, {
                    id: "003",
                    name: "王五",
                    sex: '男',
                    age: 38
                }],

②遍历对象

<div id="root">

  <h2>汽车对象</h2>
        <ul>
            <li v-for="(value,k) of car" :key="k">
                {{k}}----{{value}}
            </li>
        </ul>

</div>
 new Vue({
            el: '#root',
            data: {
              car: {
                    name: '宝马',
                    price: '80w万',
                    clocl: '白色'
                },
            }
        })

③遍历字符串(用的比较少)

<div id="root">

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

</div>
 new Vue({
            el: '#root',
            data: {
              str: 'hello'
            }
        })

④遍历指定次数(用的比较少)

<div id="root">

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

</div>
 new Vue({
            el: '#root',
            data: {
              str: 'hello'
            }
        })