4.v-for的使用

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            arr:["a","b","c"],
            obj:{
                name:"老王",
                age:19,
            },
            str:"hello wordl!",
            num:10,
            stuList:[
	            {name:"老周",age:22},
	            {name: "老李",age:100},
	            {name:"老刘",age:23}
            ],
        },
        methods: {},
    });
</script>

1.遍历数组

<div>
    <p v-for="(a,index) in arr">{{index}}-->{{a}}</p>
</div>

2.遍历对象

	<div>
        <p v-for="o in obj">{{o}}</p>
    </div>

3.遍历对象并且获取key

    <div>
        <p v-for="(v,k) in obj">
            key 的值为：{{k}}-->value的值为:{{v}}
        </p>
    </div>
     <!--v-for遍历对象获取key和index
     (尽量不要使用index参数，因为对象的key是无序的)-->
    <div>
        <p v-for="(v,k,i) in obj">
            {{i}}--key 的值为：{{k}}-->value的值为:{{v}}
        </p>
    </div>

4.遍历字符串

	<div>
        <i v-for="s in str">{{s}}</i>
    </div>

5.遍历整数

	<div>
        <b v-for="n in num">{{n}} </b><br>
        <b v-for="n in 'abcdefg'">{{n}} </b><br>
        <b v-for="n in ['a','b',5,7,8,9]">{{n}} </b><br>
    </div>

6.遍历数组对象

    <div>
        <p v-for="(stu,index) in stuList" :key="index">姓名:{{stu.name}},年龄:{{stu.age}}</p>
    </div>