Vue【数据】数组操作

  例 子  

　　定义数据结构，通过函数 data 返回数组 classmates，假设 classmates 数组中的每一个元素是班上的每一个同学的信息，然后通过 v-for 将每个同学的信息在页面上输出，p 是当前值，index 是当前索引。

<template>
    <div class="hello">
        <div v-for="(p, index) in classmates" :key="p.id">
            {{ `${index}.${p.name}` }}
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            classmates: [
                {id: 1, name: "许一"},
                {id: 2, name: "许二"},
                {id: 3, name: "许三"},
            ]
        };
    }
}
</script>

View Code