vue v-for遍历数组、对象并获取key值

v-for 是vue遍历数组的一个指令方法。接下来来看看v-for 在vue里的几种遍历方法

能遍历的数据类型

• 数组
• 对象
• 数字

参数说明

1 v-for="item in []" item为数组中的每个元素

2 v-for="(item,index) in []" item为数组的每个元素。index为数组的索引

3 v-for="(value ,key ,index) in {}" value 为每个元素 ，key为对象key ，index 对象的索引

遍历对象

<template>
<div>
<ul>
    <li v-for="(val,key,index) in obj" :key="index">key值：{{key}} value值：{{val}}  索引：{{index}}</li>
</ul>
</div>
</template>
<script>
export default {
     data(){
         return {
             obj:{
                 name:"编程领地",
                 url:"https://www.itboolean.com"
             }
         }
     }
}
</script>

结果：

<ul>
    <li>key值：name value值：编程领地  索引：0</li>
</ul>

遍历数组

<template>
<div>
<ul>
    <li v-for="(item,index) in arr" :key="index">网站名称：{{item.name}}  索引：{{index}}</li>
</ul>
</div>
</template>

<script>
export default {
data(){
return{
  arr : [
      {name:'编程领地',url:'https://www.itboolean.com'}
  ]
}
}

}
</script>

结果：

<ul>
    <li>网站名称：编程领地  索引：0</li>
</ul>

遍历数字

这个数字代表数组个数，只是每个元素都是空。

<template>
<div>
<ul>
    <li v-for="item in 10" :key="item">遍历{{item}}个li</li>
</ul>
</div>
</template>

结果：

<ul>
    <li>遍历1个li</li>
    <li>遍历2个li</li>
    <li>遍历3个li</li>
    <li>遍历4个li</li>
    <li>遍历5个li</li>
    <li>遍历6个li</li>
    <li>遍历7个li</li>
    <li>遍历8个li</li>
    <li>遍历9个li</li>
    <li>遍历10个li</li>
</ul>