Vue中for循环相关用法示例

1. v-for遍历数组里的对象

    <ul id="example">
        <li v-for="(item,index) in arr">
            {{index+1}}-{{item.msg}}
        </li>
    </ul>

    var example = new Vue({
        el: "#example",
        data: {
            arr: [
				{msg: '张三'},
            	{msg: '李四'},
            	{msg: '王五'}
            ]
        },
    })

结果：

2. v-for遍历对象

value-值 ，key-键，index-索引

    <ul id="example">
        <li v-for="(value,key,index) in object">
            {{index+1}} {{key}} : {{value}}
        </li>
    </ul>

    var example = new Vue({
        el: "#example",
        data: {
            object: {
                '姓名': '小明',
                '班级': '二班',
                '学号': '12138'
            }
        },
    })

结果：

3. 控制v-for循环次数

1. 用v-if判断索引值范围再去渲染

 <li v-for="(item,index) in arr" v-if="index < 2 " :key='index'>

2. 通过sclie截取数组的长度控制循环次数

<li v-for="(item,index) in arr.slice(0,2)" :key='index'>

3. 固定循环次数

<li v-for="index of 3" :key='index'>

4. vue中for循环遍历数据

for (let item of this.arr) {
	console.log(item);
};

    var example = new Vue({
        el: "#example",
        data: {
            arr: [1, 2, 3, 4, 5]
        },
        methods: {
            xunhuan: function() {
                for (let item of this.arr) {
                    console.log(item);
                };
            }
        }
    })