VUE3.0-列表渲染

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法,
其中 items 是源数据的数组,而 item 是迭代项的别名

<template><h3>列表渲染</h3>
<p v-for="item in names">{{ item }}</p>
</template><script>
export default {data() {return{names:['李德华','张学友','周杰伦','林俊杰']}}
} </script>

复杂数据
大多数情况,我们渲染的数据源来源于网络请求,也就是 JSON 格式

<template><h3>列表渲染</h3><div v-for="item in result"><p>{{ item.title }}</p><img :src="item.avator" alt="">
</div>
</template><script>
export default {data() {return{result:[{"id":2261677,"title": "鄂尔多斯|感受一座城市的璀璨夜景 感受一座城市,除了白日里的车水马龙,喧器繁华之","avator":"https://pic.qyer.com/avatar/002/25/77/30/200?V=1560226451",},{"id":2261566,"title": "成都这家洞穴暗黑风咖啡厅酷毙了!早c晚A走起>成都天气这么热。咖啡*人必","avator": "https://pic.ever.com/avatar/e11/87/89/69/zcerx-4537218313e",},{"id":2261662,"title":"川西新龙-措卡湖】措卡湖,意为“乱石从中的黑色海水”,神秘小众 原汁原味。深","avator":"https://pic.qyer.com/avatar/009/88/48/58/200?V=1507386782",},]}
} 
}
</script>

v-for 也支持使用可选的第二个参数表示当前项的位置索引

<template><h3>列表渲染</h3>
<p v-for="(name, index) in names">{{ name }}-{{ index }}</p></template><script>
export default {data() {return{names:['李德华','张学友','周杰伦','林俊杰'],</script>

你也可以使用of作为分隔符来替代in,这更接近 JavaScript 的迭代器语法

<p v-for="(name, index) of names">{{ name }}-{{ index }}</p>

v-for与对象
你也可以使用 v-for 来遍历一个对象的所有属性

<template><h3>列表渲染</h3><p v-for="(value,key,index) in userInfo">{{ value }}-{{ key }}-{{ index }}</p>
</div>
</template><script>
export default {data() {return{userInfo:{name:'zhansgan',age:25,sex:'男',}}
} 
}
</script>

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

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

相关文章

调试时JSON库一直提示 PDB找不到 使用需要对象文件来进行调试的 /DEBUG:Fastlink生成的

最近调试时一直提示上面的提示框&#xff0c;很是烦躁。 为什么会出现这个错误呢&#xff0c;我一直使用的是/DEBUG。出现原因没有找出来&#xff0c;理论上市使用了/DEBUG:Fastlink这个模式才会出&#xff0c;但是就是一直在报这个错误。 /DEBUG&#xff08;生成调试信息&am…

同旺科技 FLUKE ADPT 隔离版发布 ---- 3

所需设备&#xff1a; 1、FLUKE ADPT 隔离版 内附链接&#xff1b; 应用于&#xff1a;福禄克Fluke 12E / 15BMax / 17B Max / 101 / 106 / 107 应用于&#xff1a;福禄克Fluke 15B / 17B / 18B 总体连接&#xff1a; 连接线&#xff0c;根据自己实际需求而定&#xff1b; …

Flutter 中的 SnackBarAction 小部件:全面指南

Flutter 中的 SnackBarAction 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;SnackBar 是一种流行的用于提供轻量级反馈的方式&#xff0c;它可以在屏幕上短暂显示消息。SnackBarAction 则是与 SnackBar 结合使用的一种按钮组件&#xff0c;允许用户对显示的消息做出响…

数据结构--顺序表

1.顺序表的概念 1.1线性表 具有相同特性的数据元素的有限序列&#xff0c;再逻辑结构上呈现线性&#xff0c;但是在物理结构上不一定是线性&#xff08;也就是在内存中非线性&#xff09; 顺序表是线性表中的一种&#xff0c;他的底层逻辑就是数组&#xff0c;就是对数组的一…

flink程序本地运行:No ExecutorFactory found to execute the application

1.问题描述 在idea中运行flink job程序出现如下错误&#xff1a; Exception in thread "main" java.lang.IllegalStateException: No ExecutorFactory found to execute the application. at org.apache.flink.core.execution.DefaultExecutorServiceLoader.getE…

7文法分析 软设刷题 软考 +

文法分析 刷题1-55-1010-1515-2020-2525-3030-3535-4040-45 知识点1-55-1010-1515-2020-2525-3030-35 刷题 1-5 1 沟通渠道公式如下&#xff1a;Mn*&#xff08;n-1&#xff09;/ 2。M表示沟通渠道数&#xff0c;n表示项目中的成员数 2 本题给出的NFA&#xff0c;能够识别字…

基于STM32控制的双轮自平衡小车的设计

基于STM32控制的双轮自平衡小车的设计是一项涉及电子、控制理论、机械设计和编程的综合工程。以下是关于该设计的一个概述&#xff0c;包括关键组件、控制策略和示例代码。 设计概述 1. 项目背景 自平衡小车作为一种智能控制系统&#xff0c;其设计和实现涉及到多个学科领域…

c++20 std::jthread 源码简单赏析与应用

std::jthread 说明&#xff1a; std::jthread 是 C20 中引入的一个新特性&#xff0c;它是线程库中的一个类&#xff0c;专门用于处理 std::thread 与 std::stop_token 和 std::stop_source 之间的交互&#xff0c;以支持更优雅和安全的线程停止机制。 std::stop_source控制…

微软开发者大会:编程进入自然语言时代、“AI员工”闪亮登场

当地时间周二&#xff0c;美国科技公司微软召开年度Build开发者大会。在CEO纳德拉的带领下&#xff0c;微软各个产品团队再一次展现出惊人的执行力&#xff0c;在发布会上又拿出了接近50个新产品或功能更新。 整场发布会持续了接近两个小时&#xff0c;在这里挑选了一些投资者…

web自动化文件上传弹框处理

目录 文件上传介绍文件上传处理Alert 弹窗介绍Alert 弹窗处理 课程目标 掌握文件上传的场景以及文件上传的处理方式。掌握 Alert 弹窗的场景以及 Alert 弹窗的处理方式。 思考 碰到需要上传文件的场景&#xff0c;自动化测试应该如何解决&#xff1f; 文件上传处理 找到文…

el-switch自动触发更新事件

比如有这样一个列表&#xff0c;允许修改单条数据的状态。希望在更改el-switch状态时能够有个弹框做二次确认&#xff0c;没问题&#xff0c;el-switch已经帮我们想到了&#xff0c;所以它提供了beforeChange&#xff0c;根据beforeChange的结果来决定是否修改状态。一般确认修…

【python】串口双向透传python小程序

串口双向透传python小程序 import serial import threadingdef serial_forward(source, dest):while True:data source.read()dest.write(data)def main():# 串口1设置serial_port1 serial.Serial(COM9, 9600, timeout1)# 串口2设置serial_port2 serial.Serial(COM30, 9600…

递归,进程fork(),以及线程clone()之间的比较

在计算机科学中&#xff0c;处理复杂任务的常见方法有递归、进程&#xff08;通过 fork 创建&#xff09;&#xff0c;以及线程&#xff08;通过 clone 创建&#xff09;。这三种方式各有其独特的优势和适用场景。在本文中&#xff0c;我们将深入比较这三种方法&#xff0c;并展…

React Native 之 定义全局状态管理库(九)

假设你正在使用基于单页面应用&#xff08;SPA&#xff09;的微前端框架。以下简化一个应用之间共享状态的例子。 1. 使用发布/订阅模式 // globalStateManager.js class GlobalStateManager { constructor() { this.subscribers {}; this.state {}; } subscribe(key…

计算机缺失ffmpeg.dll如何修复,五种详细的修复教程分享

当你在使用电脑过程中&#xff0c;突然遇到系统或软件弹出提示信息&#xff0c;告知“ffmpeg.dll文件丢失”怎么办&#xff1f;当电脑提示ffmpeg.dll丢失时&#xff0c;可能会导致一些应用程序无法正常运行或出现错误提示。下面我将介绍5种解决电脑提示ffmpeg.dll丢失的方法。 …

String.intern()方法有什么作用

String.intern() 是一个 native&#xff08;本地&#xff09;方法&#xff0c;其作用是将指定的字符串对象的引用保存在字符串常量池中。字符串池是一个存储字符串字面量的固定池&#xff0c;它的主要目的是为了减少内存使用和提高性能。 当你调用intern()方法时&#xff0c;如…

神秘山洞惊现AI绘画至宝Stable Diffusion残卷

最近听到不少大宗门纷纷发声&#xff1a;随着AI神器的现世“程序员职业将不复存在”&#xff0c;“设计图将要失业”。 至此&#xff0c;不少修士开始担忧起来&#xff0c;现出世的AI神器会不会取代掉我辈修士。 其实&#xff0c;至女娲天神创造人类以来&#xff0c;在这漫漫…

Android软件渲染流程

Android软件渲染流程 一.渲染流程1.VSync信号的监听2.VSync信号触发绘制 二.渲染原理1.画布的获取1.1 渲染缓存的初始化1.2 graphics::Canvas的创建1.3 graphics::Canvas与渲染缓存的绑定1.3.1 SkBitmap的初始化1.3.2 SkiaCanvas与SkBitmap的绑定1.3.3 SkCanvas的创建 2.矩形的…

C++ (week4):Linux基础

文章目录 零、Linux简介1.配置环境2.Linux历史3.Linux模型 一、vim二、Linux命令行 (shell命令)1.常用命令与快捷键(1)常用命令①man命令&#xff1a;查看帮助手册 (2)快捷键 2.用户子系统(1)Linux用户(2)用户命令 3.文件子系统命令(1)目录命令1.创建文件&#xff1a;mkdir2.删…

flink读kafka写mysql数据库

场景:从kafka读数据,通过jdbc写入mysql 示例: #往kafka测试主题写入数据 kafka-console-producer.sh --broker-list wh01t:21007 --topic ypg_test --producer.config /client/Kafka/kafka/config/producer.properties –创建mysql测试表 – dsg.test definition CREATE TABL…