vue遍历数组

大家好，欢迎来到IT知识分享网。

<template>
  <div>
    <h3>ListRender</h3>
    <h3>遍历数组,不带key</h3>
    <ul class="left">
      <li v-for="(listone, index) in listones">
        { 
   { 
    index }}:姓名: { 
   { 
    listone.name }},年龄: { 
   { 
    listone.age }},性别:
        { 
   { 
    listone.sex }},手机号:{ 
   { 
   listone.phone}}
      </li>
    </ul>
     <h3>遍历数组,带key,这里的key关联age[这里是没有唯一性的,因为年龄可以相同]</h3>
    <ul class="left">
      <li v-for="(listone, index) in listones" :key="listone.age">
        { 
   { 
    index }}:姓名: { 
   { 
    listone.name }},年龄: { 
   { 
    listone.age }},性别:
        { 
   { 
    listone.sex }},手机号:{ 
   { 
   listone.phone}}
      </li>
    </ul>
         <h3>遍历数组,带key,这里的key关联phone[唯一性]</h3>
    <ul class="left">
      <li v-for="(listone, index) in listones" :key="listone.phone">
        { 
   { 
    index }}:姓名: { 
   { 
    listone.name }},年龄: { 
   { 
    listone.age }},性别:
        { 
   { 
    listone.sex }},手机号:{ 
   { 
   listone.phone}}
      </li>
    </ul>
  </div>
</template>

<script scoped>
export default { 
   
  name: "ListRender",
  data() { 
   
    return { 
   
      listones: [
        { 
    name: "姬天道", age: 40, sex: "男",phone:"18898836586" },
        { 
    name: "姬老魔", age: 60, sex: "男" ,phone:"18898836587" },
        { 
    name: "陆州州", age: 28, sex: "男" ,phone:"18898836588" },
        { 
    name: "陆阁主", age: 28, sex: "男" ,phone:"18898836589" }
      ],
    };
  },
};
</script>

<style scoped>
.left{ 
   
    text-align: left;
}
</style>