首页 > 其他分享 >Vue 中 v-for 的全方位解读:含案例与 key 属性运用及常用数组方法

Vue 中 v-for 的全方位解读:含案例与 key 属性运用及常用数组方法

时间:2024-06-20 12:58:47浏览次数:26  
标签:遍历 key 对象 Vue 数组 使用

目录

v-for介绍

v-for key属性的使用

Vue数组方法


v-for介绍


        v-for 能够对数字、数组以及对象进行遍历。值得注意的是,当 v-for 与 v-if 一同运用时,v-for 的优先级要高于 v-if。正因如此,应尽量避免将 v-if 和 v-for 共同使用。特别是在嵌套使用的情况下,每一次 v-for 的执行都会伴随着一次 v-if 的执行,这会引发重复计算的问题,进而对性能产生影响,所以 vue 官方并不提倡这种使用方式。

        示例代码如下:

<body>  
    <div id="app">  
        <el-divider content-position="left">遍历数字</el-divider>  
        <el-checkbox-group v-model="checkList">  
            <el-checkbox :label="i" v-for="i in 10" :key="i">复选框{
  {i}}</el-checkbox>  
        </el-checkbox-group>  
        <el-divider content-position="left">遍历数组</el-divider>  
        <ul>  
            <li v-for="(item,i) in arr" :key="i">{
  {item}}</li>  
        </ul>  
        <el-divider content-position="left">遍历对象数组</el-divider>  
        <el-select v-model="value" placeholder="请选择用户">  
            <el-option v-for="item in list" :key="item.id" :value="item.name">  
            </el-option>  
        </el-select>  
        <el-divider content-position="left">遍历对象</el-divider>  
        <el-descriptions title="">  
            <el-descriptions-item :label="key" v-for="(val,key,i) in obj" :key="i">{
  {val}}</el-descriptions-item>  
        </el-descriptions>

标签:遍历,key,对象,Vue,数组,使用
From: https://blog.csdn.net/chinayun_6401/article/details/139789928

相关文章

  • Vue生态工具组合
    文章目录1.Vue版本2.构建工具3.包管理器4.状态管理5.http库6.UI库7.站点生成器8.优质内容收录vue生态工具多种多样,我们要如何选择并组合起来才最好呢。接下来给大家推荐我认为比较好的工具组合方式,方便大家在搭建vue项目时可做一个参考。1.Vue版本新项目推荐优先选......
  • Java计算机毕业设计+Vue实习实训管理系统(开题报告+源码+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在当今社会,实习实训已成为高等教育中不可或缺的一部分,对于学生实践能力和职业素养的提升具有重要意义。然而,传统的实习实训管理方式存在着诸多不便,如......
  • 防抖ref如何在vue中被定义
    本文由ChatMoney团队出品为什么ref要实现防抖在vue的开发过程中,我们通常会使用到ref,但在我们需要对一个频繁的赋值操作做防抖操作时,我们通常只能通过编写一个独立的防抖函数来实现,这样相对会多一些步骤(麻烦一些)。例如我们给一个即时搜索框的input实现防抖输入(即在输入文本n秒......
  • 在vue中定义一个防抖ref
    本文由ChatMoney团队出品为什么ref要实现防抖在vue的开发过程中,我们通常会使用到ref,但在我们需要对一个频繁的赋值操作做防抖操作时,我们通常只能通过编写一个独立的防抖函数来实现,这样相对会多一些步骤(麻烦一些)。例如我们给一个即时搜索框的input实现防抖输入(即在输入文本n秒......
  • 解决使用vue-awesome-swiper,loop设置为true点击失效问题
    <template><divclass="app-container":class="[pageMode==='pageMode2560'?'pageMode2560':'']"><divclass="tag—title">物联感知</div><......
  • java小记-随机数、数组
    练习4:①随机数:类似scanner键盘录入的三步:答:(只能猜一次)如果继续猜呢:添加循环:注意:添加新的功能:保底,抽的次数到某个时刻,直接猜中,不管结果几何。②数组:......
  • Java项目-基于SpringCloud+springboot+vue的分布式架构网上商城系统(源码+数据库+文档
    源码获取:https://download.csdn.net/download/u011832806/89440647基于SpringCloud+SpringBoot+Vue的分布式架构网上商城系统   开发语言:Java   数据库:MySQL   技术:SpringCloud+SpringBoot+MyBatis+Vue.js+eureka   工具:IDEA/Ecilpse、Navicat、Maven经......
  • Java项目-基于ssm+vue的大学生兼职跟踪系统(源码+数据库+文档)​
    如需完整项目,请私信博主基于ssm+Vue的大学生兼职跟踪系统开发语言:Java数据库:MySQL技术:Spring+SpringMVC+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven本文以Java为开发技术,实现了一个大学生兼职跟踪系统。大学生兼职跟踪系统的主要实现功能包括:管理员:首页、个人中心、商......
  • Java项目-基于springboot+vue的学习平台(源码+数据库+文档)​
    源码获取:https://download.csdn.net/download/u011832806/89456223基于SpringBoot+Vue的学习平台开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven在Internet高速发展的今天,我们生活的各个领域都涉及到计算机的应用,其中包括学习平台......
  • vue(vue.js) 监视属性与深度监视
    原文链接:vue(vue.js)监视属性与深度监视–每天进步一点点(longkui.site) 1.监视属性监视属性:监视某个属性的变化小案例:<!DOCTYPEhtml><htmllang="en"><body> <divid="root"><h2>今天天气很{{hot?'热':'冷'}}</h2&g......