6.循环遍历指令

vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象的时候，方式相似但又稍有不同。

6.1.遍历对象属性

value 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key、index 都是可选参数，如果不需要，这个指令其实可以写成 v-for="value in user"；

<div id="app">
    <p v-for="(value,key,index) in user">：：</p>
    <hr>
    <p v-for="value in user"></p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            user:{
                userId:1,
                userName:'张三',
                userSex:'男'
            }
        }
    });
</script>

6.2.遍历数组元素

value 是遍历得到的元素，index 是数组下标，这里的index 也是可选参数，如果不需要，这个指令其实可以写成 v-for="value in userArr"；

<div id="app">
    <p v-for="(item,index) in userArr">
        ,, 
        <button @click="operate(index)">操作</button>
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            userArr: [{
                userId: 1,
                userName: '张三',
                userSex: '男'
            }, {
                userId: 2,
                userName: '李四',
                userSex: '女'
            }, {
                userId: 3,
                userName: '王五',
                userSex: '男'
            }]
        },
        methods:{
            operate(index){
                console.log(this.userArr[index]);
            }
        }
    });
</script>