Vue v-for遍历数组方式

Vue v-for遍历数组方式

方法一

适用于数组中只有值而没有对象的遍历

<div class="view-member">
 <span v-for="(name, index) in info" :key="index">
 {{ name}}
 </span>
</div>

info:["张三","李四"]

方法二

适用于数组中有多个对象的遍历

<div v-for="item in listData"
        :key="item.id">
        <span>{{item.userName}}</span>
        <span>{{item.userPhone}}</span>
 </div>
 listDate:[  
        {
          id: 1,
          userName: "张三",
          userPhone: "15000000000",
        },
        {
          id: 2,
          userName: "李四",
          userPhone: "13000000000",
        },
        {
          id: 4,
          userName: "王五",
          userPhone: "18000000000",
        }
      ]