Vue-16、Vue列表渲染(v-for的使用)

1、vue遍历数组

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表渲染</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root"><ul><h2>人员列表</h2><li v-for="person in persons" :key="person.id">{{person.id}}-{{person.name}}-{{person.age}}</li></ul>
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{persons:[{id:1,name:'张三',age:18},{id:2,name:'李四',age:19},{id:3,name:'王五',age:20},],},})
</script>
</body>
</html>

也可以这样写

<li v-for="(p,index) in persons" :key="index">{{p.id}}-{{p.name}}-{{p.age}}
</li>

2、遍历对象

<li v-for="(value,key) in car" :key="key">{{key}}-{{value}}</li>

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

C#基础-空处理

在c#中&#xff0c;值对象是没有办法赋值为null的。比如说&#xff0c;你想要定义一个布尔值&#xff0c;你的赋值数据要么得是true、要么就得是false&#xff0c;默认情况下我们永远没可能给这个布尔赋值为null&#xff0c;即使只是对这个变量进行声明而不初始化数据&#xff…

不方便拉网线,房间又没Wifi信号?按照这个教程,让你家里每个角落都有网

前言 前段时间去了一个朋友家里&#xff0c;她老是和我叨叨说她家的卧室一点Wifi信号都没有。每次一躺床上都只能用手机流量上网。 家里明明有拉宽带&#xff0c;为什么在某一些地方还是得用自己手机流量&#xff1f;哎&#xff0c;有钱人的痛就是房子太大了。 我问她为啥不多…

【Maven】002-Maven 安装和配置

【Maven】002-Maven 安装和配置 文章目录 【Maven】002-Maven 安装和配置一、官网1、官网2、历史版本列表3、Maven 仓库地址 二、下载 Maven 3.8.8 版本1、进入 Maven 3.8.8 版本发行说明页2、进入下载页3、下载4、下载得到 apache-maven-3.8.8-bin.zip 三、Maven 安装1、将安装…

jenkins环境搭建

jenkins环境搭建 1.环境说明2.环境准备1.jdk安装2.安装Git3.安装sshpass4.安装Maven 3.安装Jenkins(war包方式安装)1.安装2.镜像加速 4.官网提供的yum方式安装5.访问 1.环境说明 keyvalue环境centos7jdk版本11git2.43.0maven3.9.6jenkins最新版本http://mirrors.jenkins-ci.or…

LINUX基础培训六之磁盘和文件系统管理

前言、本章学习目标 掌握fdisk分区类型和管理分区了解parted分区类型掌握LVM模式文件系统创建、扩展、缩小文件系统 一、磁盘的分区管理 在 Linux 中有专门的分区命令 fdisk 和 parted。其中 fdisk 命令较为常用&#xff0c;但不支持大于 2TB 的分区&#xff1b;如果需要支…

C++/WinRT 入门

本主题将会根据新的 Windows 控制台应用程序 (C/WinRT) 项目演练一个简单的代码示例。 C/WinRT 快速入门 创建一个新的 Windows 控制台应用程序(C/WinRT) 项目。 根据实际选择平台 如果出现如下错误&#xff0c;需要安装正确的SDK。 找不到 Windows SDK 版本 10.0.17134.0 (o…

支付功能测试用例测试点?

支付功能测试用例测试点是指在测试支付功能时&#xff0c;需要关注和验证的各个方面。根据不同的支付场景和需求&#xff0c;支付功能测试用例测试点可能有所不同&#xff0c;但一般可以分为以下几类&#xff1a; 功能测试&#xff1a;主要检查支付功能是否符合设计和业务需求…

RTTI结构详细分析(VC++)

对于RTTI结构的资料真的屈指可数,类的逆向也一直是一个不好弄的问题.对此我只想贡献我的一份力量。 文中我不会分析类的内存布局,因为有很多资料已经分析的挺好的了(见参考资料)。但是现有我能找到的资料对RTTI结构的表述不完整,或者表述模糊不清,参考Clang的部分源码后&#…

一些前端学习过程的自测练习题

目录 页面设计部分 1 设计一个简单的学院网站首页&#xff1b; 2.按照图示要求完成简单的登录页面 3.完成如下网站设计 4.完成如下网站设计&#xff08;练习页面布局&#xff09; 5 利用下面素材&#xff0c;设计一个满足H5规范的网页&#xff08;移动端页面练习&#xff…

Java中单体应用锁的局限性分布式锁

互联网系统架构的演进 在互联网系统发展之初&#xff0c;系统比较简单&#xff0c;消耗资源小&#xff0c;用户访问量也比较少&#xff0c;我们只部署一个Tomcat应用就可以满足需求。系统架构图如下: 一个Tomcat可以看作是一个JVM进程&#xff0c;当大量的请求并发到达系统时&…

Redis:原理速成+项目实战——Redis企业级项目实战终结篇(HyperLogLog实现UV统计)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战14&#xff08;BitMap实现用户签到功能&#xff09; &#x1f4da;订阅专栏&am…

[易语言]使用易语言部署工业级人脸检测模型

【框架地址】 https://github.com/ShiqiYu/libfacedetection 【算法介绍】 Libfacedetection是一个开源的计算机视觉库&#xff0c;主要用于实时的人脸检测。它利用深度学习技术&#xff0c;特别是卷积神经网络&#xff08;CNN&#xff09;&#xff0c;实现了高精度的脸部定位…

【java八股文】之MYSQL基础篇

1、数据库三大范式是什么 第一范式&#xff1a;每个列都不可以再拆分。 第二范式&#xff1a;在第一范式的基础上&#xff0c;非主键列完全依赖于主键&#xff0c;而不能是依赖于主键的一部分。 第三范式&#xff1a;在第二范式的基础上&#xff0c;非主键列只依赖于主键&#…

AtCoder ABC194

这期比193稍微简单一点 C - Squared Error 手玩一下&#xff1a; N 3 N3 N3时 展开得 a 2 b 2 − 2 a b b 2 − c 2 − 2 b c a 2 c 2 − 2 a c a^2b^2-2abb^2-c^2-2bca^2c^2-2ac a2b2−2abb2−c2−2bca2c2−2ac 每个数平方项都要计算 n − 1 n-1 n−1次 减的那一份可…

C语言--结构体详解

C语言--结构体详解 1.结构体产生原因2.结构体声明2.1 结构体的声明2.2 结构体的初始化2.3结构体自引用 3.结构体内存对齐3.1 对齐规则3.2 为什么存在内存对齐3.3 修改默认对⻬数 4. 结构体传参 1.结构体产生原因 C语言将数据类型分为了两种&#xff0c;一种是内置类型&#xf…

蓝桥杯单片机组备赛——数码管动态显示

✨文章内容会不断优化&#xff0c;如果你感兴趣的话&#xff0c;欢迎点藏收藏关注我哟 &#x1f9e8;如果文章有哪里看不懂的欢迎评论区或私信留言&#xff0c;我会及时回复的 ⏰如果文章出现错误&#xff0c;欢迎指正&#xff0c;看到后我会马上改正 文章目录 一、动态显示原理…

oracle 19c容器数据库data dump数据泵传输数据(3)---完全传输

目录 查看pdb1 创建pdb2 从pdb1 中导出元数据 在pdb2中导入元数据&#xff08;dmp文件&#xff09; Full Transportable Export/Import: Example 只传输除了system&#xff0c;sysaux&#xff0c;temp&#xff0c;undo以外的用户表空间&#xff0c;這種方式傳輸的是用戶自定…

一文学会服务网格与istio使用

服务网格 现代应用程序通常被设计成微服务的分布式集合&#xff0c;每个服务执行一些离散的业务功能。服务网格是专门的基础设施层&#xff0c;包含了组成这类体系结构的微服务网络。 服务网格不仅描述了这个网络&#xff0c;而且还描述了分布式应用程序组件之间的交互。所有在…

如何生成文本: 通过 Transformers 用不同的解码方法生成文本

如何生成文本: 通过 Transformers 用不同的解码方法生成文本 假设 $p0.92$&#xff0c;Top-p 采样对单词概率进行降序排列并累加&#xff0c;然后选择概率和首次超过 $p92%$ 的单词集作为采样池&#xff0c;定义为 $V_{\text{top-p}}$。在 $t1$ 时 $V_{\text{top-p}}$ 有 9 个…

运用AI搭建中间服务层(五)

其他文件的修改 ValuesControllers.cs 注意Post的参数从[FromBody]变成了[FromForm]&#xff0c;以便接收上传的图片流数据 using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Threading.Tasks; using CognitiveMi…