一、v-for遍历对象
二、v-for遍历数组
三v-for嵌套遍历

<template>
  <div>
      <h1>center</h1>
      <!-- 遍历对象 -->
      <!-- <div v-for="(value, key, index) in obj" :key="index">
         <h1>value {{ value }}</h1>
      <h1>key {{ key }}</h1>
      <h1>index {{ index }}</h1>
      </div> -->
     
    <!-- 遍历数组 -->
    <!-- <div v-for="(item, index) in arr" :key="index"> 
      <h1>item {{ item }}</h1>
      <h1>index {{ index }}</h1>
    </div> -->
    <!-- 遍历嵌套(多层嵌套) -->


  <!-- <div v-for="(item,index) in arr" :key="index">
    <div>{{item.id}}</div>
    <div v-for="(value,index) in item.items" :key="index">
      <div >{{value.names}}</div>
    </div>
  </div> -->
<div>{{this.ll}}</div>

  </div>
</template>



<script>
export default {
    //组件名字
  name: "center",
  //接收父组件给的东西 type是接收什么东西  default 默认值,
  // vue数据集中管理
  data() {
    return {
      // obj: {
      //   a1:"a1",
      //   b1:"b1"
      // },
      arr: [1,2,3],
      item:{},
      arr:[
        {id:"1",name:'可乐',items:[{id:"1-1",names:'大瓶可乐'},{id:"2-1",names:'中瓶可乐'},{id:"3-1",names:'小瓶可乐'}]},
        {id:"2",name:'快乐水'},
        {id:"3",name:'敌敌畏'},
       
      ],
      ll:"",
    };
  },
  created(){
this.hhh();
  },
 methods: {
   hhh(){
  
     this.arr.forEach((i)=>{
       this.ll  = i.items[2].names
      console.log(this.ll);
     
     })
   }
 },
  
};

</script>





<style scoped lang="scss">
</style>