Vue框架学习笔记——列表渲染:v-for

文章目录

  • 前文提要
  • 代码正文


前文提要

本人仅做个人学习记录,如有错误,请多包涵

主要学习链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通


代码正文

<body>
  <div id="box">
    <ul>
      <li v-for="(p,index) in persons" :key="index">
        {{p.name}}-{{p.age}}
      </li>
    </ul>
  </div>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#box',
      data: {
        persons:[
          {id:1,name:'张',age:18},
          {id:2,name:'李',age:14},
          {id:3,name:'赵',age:19},
        ]
      }
    })
  </script>
</body>

效果展示:
在这里插入图片描述
上文代码其中的

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

就是v-for的使用方式,将能够遍历对象、数组、字符串,无论是data中的属性、计算属性都可以。

如果key不写,也就是写成这样

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

就是默认使用index做遍历时的标记,但是不建议使用index做遍历的下标,遍历带有输入的标签的时候容易出错。(和Vue中的虚拟DOM、真实DOM的机制有关系:虚拟DOM对比算法
用户能操作的是界面,这个是真实DOM
key是Vue内部使用的,只会在虚拟DOM中出现,真实DOM中没有。
可以通过这个链接了解:key的作用和原理(尚硅谷)

建议使用id做遍历时候的下标,具有唯一标识性,index只是暂时属于某个属性,不是一直属于某个属性,当往最前方插入的时候,后续的下标都会变化,并不会一直属于这个属性。

所以推荐使用id做遍历时的标识

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

也就是写成这样


至此,结束。

如果你觉得这篇文章写的不错,多多点赞~收藏吧!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于Python自动化测试框架之接口测试

前段时间由于公司测试方向的转型&#xff0c;由原来的web页面功能测试转变成接口测试&#xff0c;之前大多都是手工进行&#xff0c;利用postman和jmeter进行的接口测试&#xff0c;后来&#xff0c;组内有人讲原先web自动化的测试框架移驾成接口的自动化框架&#xff0c;使用的…

leetcode算法之栈

目录 1.删除字符串中的所有相邻重复项2.比较含退格的字符串3.基本计算器II4.字符串解码5.验证栈序列 1.删除字符串中的所有相邻重复项 删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {string ret;//使用数组模拟栈操作for(auto …

龙迅#LT6911GX是一款高性能HDMI2.1至MIPI或LVDS芯片,支持图像处理,DSC压缩和嵌入式LPDDR4 旋转功能!

1.描述 应用功能&#xff1a;LT6711GX适用于HDMI2.1转MIPICSI/DSI&#xff1b;HDMI2.1转LVDS&#xff0c;支持高刷模式&#xff0c;带HDCP 方案&#xff01; 分辨率&#xff1a;最高支持8K30HZ 工作温度范围&#xff1a;−40C to 85C 产品封装&#xff1a;BGA169&#xff08;9*…

clip-path,css裁剪函数

https://www.cnblogs.com/dzyany/p/13985939.html clip-path - CSS&#xff1a;层叠样式表 | MDN 我们看下这个例子 polygon里有四个值分别代表这四个点相对于原图左上方的偏移量。 裁剪个五角星

【跨境营商】创新科技助力数码转型 增强大湾区企业核心竞争力

粤港澳大湾区作为国家的重点发展区域&#xff0c;坐拥丰富的资源及商机&#xff0c;企业积极推行数码化&#xff0c;务求在大湾区抢占先机。香港电讯商业客户业务董事总经理吴家隆表示&#xff0c;近年企业锐意加快数码化步伐&#xff0c;香港电讯以创新科技融入的数码方案&…

解密Prompt系列20. LLM Agent之再谈RAG的召回多样性优化

几个月前我们就聊过RAG的经典方案解密Prompt系列14. LLM Agent之搜索应用设计。前几天刚看完openAI在DevDay闭门会议上介绍的RAG相关的经验&#xff0c;有些新的感悟&#xff0c;借此机会再梳理下RAG相关的优化方案。推荐直接看原视频&#xff08;外网&#xff09;A Survey of …

Fiddler的配置、原理和使用

一、Fiddler的工作原理 本地应用与服务器之间所有的请求&#xff08;request&#xff09;和响应&#xff08;response&#xff09;&#xff0c;由fiddler进行转发&#xff0c;此时fiddler以代理服务器的方式存在。 由于所有的网络数据都要经过fiddler&#xff0c;因此&#xf…

Proteus仿真--基于51单片机的DS18B20温度采集及报警

本文介绍基于DS18B20温度采集及报警的仿真设计&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真图如下 其中温度传感器选用DS18B20器件&#xff0c;主要用于获取温度数据并上传&#xff0c;温度显示选用数码管&#xff0c;报警模块选用蜂鸣器 仿真运行视频 Pr…

vue3 vue-router的安装及配置 (一)

文章目录 一、安装二、Vue Router配置2.1 vue-router两种引入方式的区别2.2 不同的历史模式 三、router-link四、router-view Vue Router作用&#xff1a;在应用程序中实现优雅的导航和路由管理。 一、安装 注意&#xff1a;vue3安装的是vue-router4,vue2安装的是vue-router3…

C#网络编程TCP程序设计(Socket类、TcpClient类和 TcpListener类)

目录 一、Socket类 1.Socket类的常用属性及说明 2.Socket类的常用方法及说明 二、TcpClient类 三、TcpListener类 四、示例 1.源码 2.生成效果 TCP(Transmission Control Protocol)是一种面向连接的、可靠的、基于字节流的传输层通信协议。在C#中&#xff0c;TCP程序设…

.Net6支持的操作系统版本(.net8已来,你还在用.netframework4.5吗)

机缘 不知不觉,.NET8都已经面世,而我们一直还停留在.netframework4.5开发阶段,最近准备抽空研究一下.Net6,一是为了提高技术积累,一方面想着通过这次的学习,看有没有可能将老的FX版本替换到.Net6开发上,经过查找官方资料,对.Net6支持的系统版本做一个分享,方便大家后期…

css设置渐变色

css如何设置自定义渐变色&#xff1f;线性渐变篇 CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡。 CSS定义了三种渐变类型: Linear Gradients (goes down/up/left/right/diagonally) 下降/ 上升/左/右/对角线Radial Gradients (defined by their center) 由中心定…

RocketMQ - SpringBoot整合RocketMQ

SpringBoot整合RocketMQ 1、快速实战 ​ 按照SpringBoot三板斧&#xff0c;快速创建RocketMQ的客户端。创建Maven工程&#xff0c;引入关键依赖&#xff1a; <dependencies><dependency><groupId>org.apache.rocketmq</groupId><artifactId>r…

算符优先语法分析程序设计与实现

制作一个简单的C语言词法分析程序_用c语言编写词法分析程序-CSDN博客文章浏览阅读378次。C语言的程序中&#xff0c;有很单词多符号和保留字。一些单词符号还有对应的左线性文法。所以我们需要先做出一个单词字符表&#xff0c;给出对应的识别码&#xff0c;然后跟据对应的表格…

C++-详解智能指针

目录 ​编辑 一.什么是智能指针 1.RAII 2.智能智能指针 二.为什么需要智能指针 1.内存泄漏 a. 什么是内存泄漏&#xff0c;内存泄漏的危害 b.内存泄漏分类 c.如何检测内存泄漏 d.如何避免内存泄漏 总结一下: 2.为什么需要智能指针以及智能指针的原理 三.智能指针的使用 1.C…

Docker使用笔记

1.使用docker创建pytorch深度环境 1.1 创建docker环境 docker run -it --nameDCASE --gpus all --shm-size 64G pytorch/pytorch /bin/bash #这里可以根据需要将 pytorch/pytorch 镜像更改为自己需要的镜像&#xff0c;如果不知道自己主机含有哪几个镜像&#xff0c;可以使用…

Linux lshw命令(lshw指令)(List Hardware,获取底层硬件信息)(查询硬件信息)

文章目录 Linux lshw命令&#xff1a;一个全面的硬件信息查询工具介绍安装lshw使用lshwlshw的选项和参数lshw文档英文文档中文文档 命令示例lshw -c network -sanitize查看系统网络硬件信息&#xff0c;并移除敏感项&#xff08;显示为REMOVED&#xff09; lshw与其他命令的对比…

手搭手浅学状态管理VueX

https://vuex.vuejs.org/zh/guide/ 每一个 Vuex 应用的核心就是 store&#xff08;仓库&#xff09;。“store”基本上就是一个容器&#xff0c;它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同&#xff1a; Vuex 的状态存储是响应式的。当 Vu…

25、矩阵乘法的本质

本来一直在介绍卷积,为什么突然出现一个矩阵乘法呢? 因为如果我们将卷积运算拆开,其中最核心的部分便是一个矩阵乘法。所以,卷积算法可以看做是带滑窗的矩阵乘法。 这里的滑窗,就是卷积运算中所示意的动图那样,所以,我们把滑窗固定,不看卷积核滑动这个动作,那么就是…

二维码智慧门牌管理系统升级:地址审核管理方案

文章目录 前言一、智能化门牌管理系统二、地址审核管理方案 前言 在当今信息化社会&#xff0c;标准地址管理是确保数据准确性和运营顺畅的重要一环。为了更好地管理地址信息&#xff0c;二维码智慧门牌管理系统升级了一项新的地址审核管理方案&#xff0c;旨在提高地址管理的…
最新文章