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

相关文章推荐

好帅的楼梯 · innerhtml居中 - CSDN文库· 1 年前 ·

重感情的生姜 · MySQL ...· 2 年前 ·

仗义的竹笋 · 对 APK 进行手动签名 - ...· 2 年前 ·

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>
    <li v-for="(val,key,index) in obj" :key="index">key值：{{key}} value值：{{val}}  索引：{{index}}</li>
</div>
</template>
<script>
export default {
     data(){
         return {
             obj:{
                 name:"编程领地",
                 url:"https://www.itboolean.com"
</script>
    <li>key值：name value值：编程领地  索引：0</li>
遍历数组
<template>
    <li v-for="(item,index) in arr" :key="index">网站名称：{{item.name}}  索引：{{index}}</li>
</div>
</template>
<script>
export default {
data(){
return{
  arr : [
      {name:'编程领地',url:'https://www.itboolean.com'}
</script>
    <li>网站名称：编程领地  索引：0</li>
遍历数字
这个数字代表数组个数，只是每个元素都是空。
<template>
    <li v-for="item in 10" :key="item">遍历{{item}}个li</li>
</div>
</template>
    <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>