v-for指令案例详解

对于v-for指令,以前老是不能理解,经常记混,所以特地写篇笔记来加强下记忆,希望借此能学的更深刻一点

v-for顾名思义就是个for循环,是vue的一个循环。在遍历json字符串的时候有奇佳的效果,感觉就是为他们而造的。

1、数组

如果给你个数组,里面放了值你怎么遍历出来呢。在java中一般用for循环,再用个i++把整个整个数组渲染出来,而vue则简化了这个操作,相当于将item变成一个变量,自动实行item++的操作,就是接口已经给你写好了,你只要把数组给我就行了。然后自动将数组里的值赋给item。

data(){return{arr:[8,9,10,11,12,13  ]}}
}
<p v-for="item in arr">{{item}}</p>

完整的写法是

<p v-for="(item,i) in arr">数组里的值是:{{item}} 数组序号:{{i}}  </p>

有数组的值和数组的序列号,且序列号是从0开始的。
值得注意的是,一般我们不加括号们也不使用序列号,item默认取的数组里的值,如果反过来是(i,item),那么item会变成序列号。

既然数组是这样的,那么后面的数组对象就是在这基础之上完成了。

2、数组对象

这个用的最频繁,最常用

 objectArr:[{name:"zs",con:"你好啊,zs"},{name:"ls",con:"你好啊,ls"},{name:"ww",con:"你好啊,ww"},{name:"zl",con:"你好啊,zl"},{name:"lq",con:"你好啊,老铁"}]
<p v-for="(item,i) in  objectArr">{{i}}++++++++++{{item.name}} </p>

在这里插入图片描述

3、对象

这里循环的是键值对,写出一个键值对,后面的重复渲染

obj:{name:"zs",age:"17",sex:"男",password:"123456"}
<p v-for="(value,key) in  obj">键:{{key}},年龄:{{value}}</p>

4、数字

这个最简单的数字遍历循环,从1到cout依次输出

<p v-for="count in 8">{{count}}</p>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/322901.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker ASP.NET Core 2.0 微服务跨平台实践

本篇博文的目的&#xff1a;在 Mac OS 中使用 VS Code 开发 ASP.NET Core 2.0 应用程序&#xff0c;然后在 Ubuntu 服务器配置 Docker 环境&#xff0c;并使用 Docker 运行 Consul 和 Fabio 环境&#xff0c;最后使用 Docker 运行 ASP.NET Core 2.0 应用程序。 你要的项目源码&…

微软Connect(); 2017大会梳理:Azure、数据、AI开发工具

在今天召开的 Connect(); 2017 开发者大会上&#xff0c;微软宣布了 Azure、数据、AI 开发工具的内容。这是第一天的 Connect(); 2017 的主题演讲。 在开场视频中霍金又来了。你记得这个Intel为他开发的系统使用了C#&#xff0c;而且是开源的&#xff0c;在Github上地址&#x…

Hadoop生态hive(五)Hive QL数据库

&#xff08;1&#xff09;查看数据库 show databases; &#xff08;2&#xff09;使用数据库 use db; &#xff08;3&#xff09;查看当前数据库 #与mysql的select database();不一样 select current_database(); &#xff08;4&#xff09;创建数据库 create database [if …

讨论.NET Core 配置对GC 工作模式与内存的影响

引出问题: Asp.net core应用在 Kubernetes上内存使用率过高问题分析 Asp.net core应用在 Kubernetes上内存使用率过高问题分析 这篇文章中讨论了&#xff0c;在默认情况下&#xff0c;ASP.NET Core程序跑在K8s的Docker中内存使用率>600MB&#xff0c;导致Docker容器频繁重启…

Hadoop生态hive(六)Hive QL表

一、创建表 语法&#xff1a; create [temporary] [external] table [if not exists] [db_name.] table_name [(col_name data_type [comment col_comment], ...)] [comment table_comment] [row format row_format] [stored as file_format] 例子&#xff1a; create tab…

v-for渲染img标签图片

错误的示例 <div v-for"item in list"><img src"{{item.image}}" /> </div>这样做会报错 正确的做法应该是 <div v-for"item in list"><img :src"item.image" /> </div>这样就可以把后端接口的…

Mono的新解释器

Mono即将通过它的JIT编译器和静态编译器以及一个.net解释器以带来一些新的方式来运行你的代码. 在2001年Mono项目诞生之时&#xff0c;我们为.net指令集实现了一个解释器用基于它实现了一个在Linux上的自托管的.net开发环境. 当时我们把解释器定义为一个用来构建JIT编译器的临时…

欢乐纪中某B组赛【2019.1.27】

前言 写完T1T1T1和T2T2T2颓了半天 成绩 RankRankRank是有算别人的 RankRankRankPersonPersonPersonScoreScoreScoreAAABBBCCC2222017myself2017myself2017myself2302302301001001001001001003030304442017xxy2017xxy2017xxy2002002001001001001001001000001111112017zyc2017zy…

Apache Druid(一)简介

翻译自 Apache Druid Apache Druid&#xff08;正在孵化&#xff09;是一个开源的分布式数据存储。德鲁伊的核心设计结合了OLAP /分析数据库&#xff0c;时间序列数据库和搜索系统的思想&#xff0c;为广泛的用例创建了一个统一的系统。Druid将这三个系统中的每个系统的关键特…

[ASP.NET Core 2.0 前方速报].NET Core 2.0.3 已经支持引用第三方程序集了

发现问题 在将 FineUIMvc&#xff08;支持ASP.NET MVC 5.2.3&#xff09;升级到 ASP.NET Core 2.0 的过程中&#xff0c;我们发现一个奇怪的现象&#xff1a; 通过项目引用 FineUICore 工程一切正常&#xff0c;但是将 FineUICore 编译后&#xff0c;通过程序集的引用方式就会报…

设计事件驱动的微服务

事件驱动的微服务是一个未受到应有探讨的领域&#xff0c;在近日举行的Con伦敦2017微服务大会上&#xff0c;Greg Young表达了这样的观点。同时&#xff0c;他还特别强调&#xff0c;不应该对所有的微服务都使用事件驱动模式。相反&#xff0c;他建议逐个服务进行考察&#xff…

express中获取url参数

问号传参获取参数 获取 http://127.0.0.1:3001/user?id10&namezs 中的查询参数&#xff1a; 直接使用 req.query 获取参数即可&#xff1b; 注意&#xff1a;URL 地址栏中通过 查询字符串 传递的参数&#xff0c;express 框架会直接解析&#xff0c;大家只需使用 req.que…

处理ASP.NET Core中的HTML5客户端路由回退

在使用由Angular&#xff0c;React&#xff0c;Vue等应用程序框架构建的客户端应用程序时&#xff0c;您总是会处理HTML5客户端路由&#xff0c;它将完全在浏览器中处理到页面和组件的客户端路由。几乎完全在浏览器中... HTML5客户端路由在客户端上工作的很好&#xff0c;但是当…

TFS在项目中DevOps落地进程(下)

紧接上篇 TFS在项目中Devops落地进程&#xff08;上&#xff09; 再接着说TFS相关之前先插入一个番外篇&#xff0c;虽然跟TFS关系不大但跟DevOps关系很大&#xff0c;觉得有必要在此乱入一下。 番外篇--监控之Application Insights 我们之前并没有任何监控类产品&#xff08;我…

欢乐纪中某B组赛【2019.1.28】

前言 心态爆炸 成绩 RankRankRank是有算别人的 RankRankRankPersonPersonPersonScoreScoreScoreAAABBBCCCDDD3332017myself2017myself2017myself1901901901001001005050500004040401313132017zyc2017zyc2017zyc1701701707070706060600004040401313132017hzb2017hzb2017hzb1701…

这应该是目前最快速有效的ASP.NET Core学习方式(视频)

ASP.NET Core都2.0了&#xff0c;它的普及还是不太好。作为一个.NET的老司机&#xff0c;我觉得.NET Core给我带来了很多的乐趣。Linux&#xff0c; Docker&#xff0c; CloudNative&#xff0c;MicroService&#xff0c;DevOps这些都能跟它很完美的结合&#xff0c;再加ASP.NE…

大叔公开课~微服务与持久集成

闲话多说 免费报名&#xff1a;http://www.genshuixue.com/teacher/classCourseDetail/171117794648么可以通过阅读原文报名 .Net Core来了&#xff0c;带给我们的是什么&#xff1f;跨平台&#xff0c;无疑是最大的亮点&#xff01; Docker横空出世&#xff0c;让开发者和运维…

语音服务——腾讯云

腾讯语音服务文档 一、开通语音消息服务流程 &#xff08;1&#xff09;注册并认证 如果您还没有腾讯云账号&#xff0c;您需要 注册腾讯云 账号&#xff0c;并完成 企业实名认证。如果您已有企业认证的腾讯云账号&#xff0c;请直接进行下一步操作。 申请开通语音消息服务 …

Visual Studio交叉编译器提供对ARM的支持

只要ARM平台能够运行Windows&#xff0c;Visual Studio就有能力拓展ARM平台。在Visual Studio 2017 15.5预览版2中&#xff0c;该IDE通过使用GCC编译器&#xff0c;增加了对基于ARM的计算机和物联网&#xff08;IoT&#xff09;设备的支持力度&#xff0c;从而扩展了对ARM平台的…

我心中的ASP.NET Core 新核心对象WebHost(二)

这是ASP.NET Core新核心对象系列的第二篇&#xff0c;上一篇 WebHost准备阶段 我们讲到了WebHostBuilder的初始化及配置。我们给WebHostBuilder进行以下配置 UseKestrel 设置Kestrel为HttpServer ConfigureAppConfiguration 设置了配置文件 ConfigureLogging 配置了日志处理器…