快捷導(dǎo)航

Vue中v-for的9種使用案例總結(jié)大全

更新時(shí)間：2023年12月28日 08:26:47 作者：不會(huì)敲代碼的健身教練

v-for是vue的循環(huán)指令,作用是遍歷數(shù)組(對(duì)象)的每一個(gè)值,這篇文章主要給大家介紹了關(guān)于Vue中v-for的9種使用案例的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 循環(huán)渲染數(shù)組
2. 循環(huán)渲染對(duì)象
3. 循環(huán)渲染數(shù)字
4. 循環(huán)渲染帶有索引的數(shù)組
5. 循環(huán)渲染嵌套數(shù)組
6. 循環(huán)渲染對(duì)象數(shù)組
7. 循環(huán)渲染多維數(shù)組
8. 循環(huán)渲染對(duì)象的屬性數(shù)組
9. 循環(huán)渲染組件
總結(jié)

v-for可以用于循環(huán)渲染數(shù)組、對(duì)象和數(shù)字等數(shù)據(jù)類型，常見(jiàn)的使用場(chǎng)景包括：

1. 循環(huán)渲染數(shù)組

以下代碼的意思是：循環(huán)渲染一個(gè)包含三個(gè)元素的列表，每個(gè)元素的值分別為“第一項(xiàng)”、“第二項(xiàng)”和“第三項(xiàng)”。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['第一項(xiàng)', '第二項(xiàng)', '第三項(xiàng)']
    }
  }
}
</script>

2. 循環(huán)渲染對(duì)象

以下代碼的意思是：循環(huán)渲染一個(gè)包含三個(gè)屬性的對(duì)象，每個(gè)屬性的鍵值對(duì)分別為“name: 張三”、“age: 18”和“gender: 男”。

<template>
  <div>
    <ul>
      <li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: '張三',
        age: 18,
        gender: '男'
      }
    }
  }
}
</script>

3. 循環(huán)渲染數(shù)字

以下代碼的意思是：循環(huán)渲染數(shù)字1到5，每個(gè)數(shù)字作為列表項(xiàng)的內(nèi)容。

<template>
  <div>
    <ul>
      <li v-for="n in 5" :key="n">{{ n }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

4. 循環(huán)渲染帶有索引的數(shù)組

以下代碼的意思是：循環(huán)渲染一個(gè)包含三個(gè)元素的列表，每個(gè)元素的值分別為“第一項(xiàng)”、“第二項(xiàng)”和“第三項(xiàng)”，并在每個(gè)列表項(xiàng)前面顯示該項(xiàng)的索引。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ index }}: {{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['第一項(xiàng)', '第二項(xiàng)', '第三項(xiàng)']
    }
  }
}
</script>

5. 循環(huán)渲染嵌套數(shù)組

以下代碼的意思是：循環(huán)渲染一個(gè)包含兩個(gè)元素的列表，每個(gè)元素包含一個(gè)標(biāo)題和一個(gè)子列表，子列表中包含兩個(gè)子項(xiàng)。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.title }}
        <ul>
          <li v-for="(subItem, subIndex) in item.subList" :key="subIndex">{{ subItem }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: '第一項(xiàng)',
          subList: ['子項(xiàng)1', '子項(xiàng)2']
        },
        {
          title: '第二項(xiàng)',
          subList: ['子項(xiàng)3', '子項(xiàng)4']
        }
      ]
    }
  }
}
</script>

6. 循環(huán)渲染對(duì)象數(shù)組

以下代碼的意思是：循環(huán)渲染一個(gè)包含三個(gè)元素的對(duì)象數(shù)組，每個(gè)元素包含一個(gè)name和age屬性。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '張三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 }
      ]
    }
  }
}
</script>

7. 循環(huán)渲染多維數(shù)組

以下代碼的意思是：循環(huán)渲染一個(gè)包含兩個(gè)元素的多維數(shù)組，每個(gè)元素是一個(gè)包含兩個(gè)元素的數(shù)組。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        ['第一項(xiàng)', '第二項(xiàng)'],
        ['第三項(xiàng)', '第四項(xiàng)']
      ]
    }
  }
}
</script>

8. 循環(huán)渲染對(duì)象的屬性數(shù)組

以下代碼的意思是：循環(huán)渲染一個(gè)對(duì)象的屬性數(shù)組，每個(gè)元素是對(duì)象的一個(gè)屬性值

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: '張三',
        age: 18,
        gender: '男'
      }
    }
  },
  computed: {
    list() {
      return Object.values(this.obj)
    }
  }
}
</script>

9. 循環(huán)渲染組件

以下代碼的意思是：循環(huán)渲染一個(gè)包含三個(gè)元素的對(duì)象數(shù)組，

<template>
  <div>
    <my-component v-for="(item, index) in list" :key="index" :item="item"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      list: [
        { name: '張三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 }
      ]
    }
  }
}
</script>