vue-常见用法for

最新推荐文章于 2025-06-23 17:35:24 发布

多则惑少则明

最新推荐文章于 2025-06-23 17:35:24 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：【技术】JavaScript/python/shell

本文链接：https://blog.youkuaiyun.com/huazhongkejidaxuezpp/article/details/110096413

【技术】JavaScript/python/shell 专栏收录该内容

45 篇文章

订阅专栏

博客主要介绍了Vue里v-for的使用，包括用其循环显示正方形、动态绑定ID、根据ID设置属性，还提及了自定义组件的多重v-for循环，这些都是前端开发中Vue框架的重要应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-for使用

<div id="app">
        <!--v-for循环普通数组-->
        <div v-for="(item,index) in list">单项:{{item}}---索引号:{{index}}</div>
        <div v-for="item in list">---单项---{{item}}</div>

        <!--v-for循环对象数组-->
        <div v-for="person in arrObj">id:{{person.id}}---name:{{person.name}}</div>
        <div v-for="(person,index) in arrObj">id:{{person.id}}---name:{{person.name}}---索引号:{{index}}</div>

        <!--v-for循环对象-->
        <div v-for="(value,key,index) in obj">值：{{value}}---键：{{key}}---索引：{{index}}</div>

        <!--v-for迭代数字-->
        <div v-for="count in 10">{{count}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [1, 2, 3, 4, 5, 6],
                arrObj: [{
                        id: 1,
                        name: "name1"
                    },
                    {
                        id: 2,
                        name: "name2"
                    }, {
                        id: 3,
                        name: "name3"
                    }, {
                        id: 4,
                        name: "name4"
                    }
                ],
                obj: {
                    name: "stain",
                    age: 27,
                    job: "engineer"
                }
            }
        });
    </script>

循环显示正方形

<div v-for="person in arrObj" class="square">
  {{person.name}}
</div>

.square {
  width: 150px;
  height: 150px;
  background: dodgerblue;
}

.square:after {
  content: "";
  display: block;
  /*padding-bottom: 10%;!* padding百分比相对父元素宽度计算 *!*/
  margin-top: 50%; /* margin 百分比相对父元素宽度计算 */

}
.square:before {
  content: "";
  display: block;
  /*padding-bottom: 100%;*/
  margin-top: 50%; /* margin 百分比相对父元素宽度计算 */

}

arrObj: [
          {
          id: 1,
          name: "name1"
        },
          {
            id: 2,
            name: "name2"
          },
          {
            id: 3,
            name: "name3"
          },
          {
            id: 4,
            name: "name4"
          }
         ]

动态绑定ID

<div v-for="person in arrObj" class="square" @click="dowm(person.id)" @mouseover="mouseOver(person.id)"
                 @mouseleave="mouseLeave(person.id)" :style="backgroundData" :id="person.id">
              {{person.name}}
 </div>

根据ID设置属性

mouseLeave: function (idx) {
        $("#"+idx).css({"width":"150px" ,"height":"150px"});
}

自定义组件多重v-for循环

list: [
          {author: Mike, content: 'Mike content', subitem: [1, 2, 3]},
          {author: Jack, content: 'Jack content', subitem: [4, 5, 6]},
    ]



例子1： 单循环

<listitem v-for="(listitem,listindex) in list" :key="listindex"
              :content1="listitem" :no="listindex">
</listitem>

例子：多重循环

 <listitem2 v-for="(listitem,listindex) in list" :key="listindex"
              :content1="listitem" :no="listindex">
        <listitemnum2 v-for="(n,nindex) in listitem.subitem" :num="n" :key="nindex"></listitemnum2>
</listitem2>