VUE3中 v-for指令用法，列表循环

最新推荐文章于 2024-07-27 19:03:29 发布

木子木木的专栏

最新推荐文章于 2024-07-27 19:03:29 发布

阅读量2.1w

点赞数 4

分类专栏： Vue 文章标签： vue v-for列表循环

本文链接：https://blog.csdn.net/qq_37029814/article/details/115723905

版权

本文详细介绍了Vue3中的v-for指令，包括对数组、对象的循环渲染，如何改变列表数据，以及直接循环数字。通过示例展示了v-for的多种用法，如使用item in list的形式，以及如何在循环中添加key值以提高性能。同时，还讲解了如何在对象循环中不展示特定属性的情况。

摘要由CSDN通过智能技术生成

一，v-for指令简介：

v-for指令需要以 item in list形式的特殊语法，list是源数据数组， item 是数据组元素迭代的别名

可以使用v-for指令对数组进行循环，示例如下：

    const app = Vue.createApp({
        data() {
            return {
                list:['haha','doms','呵呵']
              }  
         },

        template: `
            <div>
               <div v-for = "item in list">
                 {
  {item}}
               </div>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

打印结果：

二，v-for循环渲染：

1，v-for对数组进行循环外

第一个参数是原数据，第二参数 index：

index：指的是当前循环的下标，或者第几次循环，

示例如下：

    const app = Vue.createApp({
        data() {
            return {
                list:['haha','doms','呵呵']
              }  
         },

        template: `
            <div>
               <div v-for = "(item,index) in list">
                 {
  {item}} -->{
  {index}}
               </div>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

打印结果：

2，v-for对对象进行循环：

此时第一个参数是属性值 value，第二个参数是key，第三个参数是index（下标）

示例如下：

   const app = Vue.createApp({
        data() {
            return {
                listArray:['haha','doms','呵呵'],
                listObject:{
                    name: 'muzili',
                    sex: 'girl',
                    job: 'engineer'
                },

              }  
         },

        template: `
            <div>