<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>