Vue中v-for的9种使用案例

v-for可以用于循环渲染数组、对象和数字等数据类型，常见的使用场景包括：

1. 循环渲染数组

以下代码的意思是：循环渲染一个包含三个元素的列表，每个元素的值分别为“第一项”、“第二项”和“第三项”。

  
    
      {{ item }}
    
  



export default {
  data() {
    return {
      list: ['第一项', '第二项', '第三项']
    }
  }
}

2. 循环渲染对象

以下代码的意思是：循环渲染一个包含三个属性的对象，每个属性的键值对分别为“name: 张三”、“age: 18”和“gender: 男”。

  
    
      {{ key }}: {{ value }}
    
  



export default {
  data() {
    return {
      obj: {
        name: '张三',
        age: 18,
        gender: '男'
      }
    }
  }
}

3. 循环渲染数字

以下代码的意思是：循环渲染数字1到5，每个数字作为列表项的内容。

  
    
      {{ n }}
    
  



export default {
  data() {
    return {}
  }
}

4. 循环渲染带有索引的数组

以下代码的意思是：循环渲染一个包含三个元素的列表，每个元素的值分别为“第一项”、“第二项”和“第三项”，并在每个列表项前面显示该项的索引。

  
    
      {{ index }}: {{ item }}
    
  



export default {
  data() {
    return {
      list: ['第一项', '第二项', '第三项']
    }
  }
}

5. 循环渲染嵌套数组

以下代码的意思是：循环渲染一个包含两个元素的列表，每个元素包含一个标题和一个子列表，子列表中包含两个子项。

  
    
      
        {{ item.title }}
        
          {{ subItem }}
        
      
    
  



export default {
  data() {
    return {
      list: [
        {
          title: '第一项',
          subList: ['子项1', '子项2']
        },
        {
          title: '第二项',
          subList: ['子项3', '子项4']
        }
      ]
    }
  }
}

6. 循环渲染对象数组

以下代码的意思是：循环渲染一个包含三个元素的对象数组，每个元素包含一个name和age属性。

  
    
      
        {{ item.name }} - {{ item.age }}
      
    
  



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

7. 循环渲染多维数组

以下代码的意思是：循环渲染一个包含两个元素的多维数组，每个元素是一个包含两个元素的数组。

  
    
      
        {{ item }}
      
    
  



export default {
  data() {
    return {
      list: [
        ['第一项', '第二项'],
        ['第三项', '第四项']
      ]
    }
  }
}

8. 循环渲染对象的属性数组

以下代码的意思是：循环渲染一个对象的属性数组，每个元素是对象的一个属性值

  
    
      
        {{ item }}
      
    
  



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

9. 循环渲染组件

以下代码的意思是：循环渲染一个包含三个元素的对象数组，

  
    
  



import MyComponent from './MyComponent.vue'

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

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/aa2cae18e8.html