脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue v-for使用案例

Vue中v-for的9种使用案例总结大全

 更新时间：2023年12月28日 08:26:47   作者：不会敲代码的健身教练  
v-for是vue的循环指令,作用是遍历数组(对象)的每一个值,这篇文章主要给大家介绍了关于Vue中v-for的9种使用案例的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

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

1. 循环渲染数组

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

<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. 循环渲染对象

以下代码的意思是：循环渲染一个包含三个属性的对象，每个属性的键值对分别为“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. 循环渲染数字

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

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

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

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

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

<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. 循环渲染嵌套数组

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

<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. 循环渲染对象数组

以下代码的意思是：循环渲染一个包含三个元素的对象数组，每个元素包含一个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. 循环渲染多维数组

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

<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. 循环渲染对象的属性数组

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

<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. 循环渲染组件

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

<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>

总结 

到此这篇关于Vue中v-for的9种使用案例的文章就介绍到这了,更多相关Vue v-for使用案例内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue .js绑定checkbox并获取、改变选中状态的实例

    vue .js绑定checkbox并获取、改变选中状态的实例

    今天小编就为大家分享一篇vue .js绑定checkbox并获取、改变选中状态的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue中禁止编辑的常见方法(以禁止编辑输入框为例)

    Vue中禁止编辑的常见方法(以禁止编辑输入框为例)

    在我们开发项目的时候,有时候我们不希望用户对我们的页面进行操作,尤其是输入框之类的,这篇文章主要给大家介绍了Vue中禁止编辑的常见方法,文中介绍的方法主要以禁止编辑输入框为例,需要的朋友可以参考下
    2024-02-02
  • Vue snippets插件原理与使用介绍

    Vue snippets插件原理与使用介绍

    这篇文章主要介绍了Vue snippets插件原理与使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-10-10
  • vue解决Not allowed to load local resource问题的全过程

    vue解决Not allowed to load local resource问题的全过程

    这篇文章主要给大家介绍了关于vue解决Not allowed to load local resource问题的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • vue-better-scroll 的使用实例代码详解

    vue-better-scroll 的使用实例代码详解

    这篇文章主要介绍了vue-better-scroll 的使用实例代码详解，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-12-12
  • Vue Router 返回后记住滚动条位置的实现方法

    Vue Router 返回后记住滚动条位置的实现方法

    使用 Vue router 创建 SPA(Single Page App),往往有这种需求：首页是列表页,点击列表项进入详情页,在详情页点击返回首页后,希望看到的是,首页不刷新,并且滚动条停留在之前的位置,这篇文章主要介绍了Vue Router 返回后记住滚动条位置的实现方法,需要的朋友可以参考下
    2023-09-09
  • 使用axios发送post请求,将JSON数据改为form类型的示例

    使用axios发送post请求,将JSON数据改为form类型的示例

    今天小编就为大家分享一篇使用axios发送post请求,将JSON数据改为form类型的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 前端设置cookie之vue-cookies使用及说明

    前端设置cookie之vue-cookies使用及说明

    这篇文章主要介绍了前端设置cookie之vue-cookies使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

    vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

    这篇文章主要介绍了vue 自定指令生成uuid滚动监听达到tab表格吸顶效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-09-09
  • vite 项目中如何使用Sass

    vite 项目中如何使用Sass

    Vite默认集成了对Sass的支持,你只需要安装Sass本身即可,这篇文章主要介绍了vite 项目中如何使用Sass,需要的朋友可以参考下
    2024-04-04

最新评论