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

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

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

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

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

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

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

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

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

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

以下代碼的意思是：循環(huán)渲染一個包含三個屬性的對象，每個屬性的鍵值對分別為“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，每個數(shù)字作為列表項的內(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)渲染一個包含三個元素的列表，每個元素的值分別為“第一項”、“第二項”和“第三項”，并在每個列表項前面顯示該項的索引。

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

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

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

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

<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: '第一項',
          subList: ['子項1', '子項2']
        },
        {
          title: '第二項',
          subList: ['子項3', '子項4']
        }
      ]
    }
  }
}
</script>

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

以下代碼的意思是：循環(huán)渲染一個包含三個元素的對象數(shù)組，每個元素包含一個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)渲染一個包含兩個元素的多維數(shù)組，每個元素是一個包含兩個元素的數(shù)組。

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

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

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

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

<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)渲染一個包含三個元素的對象數(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>