Vue3-14- 【v-for】循环数组-解构的操作

说明

v-for 在遍历数组的时候,可以使用解构的语法,直接将数组中对象元素的属性解构出来,
从而实现直接使用对象属性值的效果。语法格式 : v-for="({属性名1,属性名2},索引变量名) in 数组名"具体的使用请看代码:

案例代码

<template><!-- v-for 遍历数组 - 使用解构的语法直接读取属性值 --><div v-for="({id,name},index) in stuList">{{ index }} - {{ id }} - {{ name }}</div></template><script setup lang="ts">import { ref } from 'vue'// 定义一个数组const stuList = ref([{id:100,name:'小红'},{id:101,name:'小蓝'},{id:102,name:'小绿'}])</script><style scoped>
</style>

在这里插入图片描述

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

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

相关文章

Conda 搭建简单的机器学习 Python 环境

文章目录 Conda 概述Conda 常用命令Conda 自身管理查看 Conda 版本更新 Conda清理索引缓存添加镜像源设置搜索时显示通道地址查看镜像源删除镜像源 环境管理创建虚拟环境删除虚拟环境查看所有虚拟环境复制虚拟环境激活虚拟环境关闭虚拟环境导入、导出环境 包管理虚拟环境下安装…

数据可视化:解析跨行业普及之道

数据可视化作为一种强大的工具&#xff0c;在众多行业中得到了广泛的应用&#xff0c;其价值和优势不断被发掘和利用。今天就让我以这些年来可视化设计的经验&#xff0c;讨论一下数据可视化在各个行业中备受青睐的原因吧。 无论是商业、科学、医疗保健、金融还是教育领域&…

HTML---基础

文章目录 目录 文章目录 前言 一.HTML概述 二.HTML相关概念 HTML作用域 HTML标签 HTML转译字符 总结 前言 一.HTML概述 HTML&#xff08;超文本标记语言&#xff09;是一种用于创建网络页面的标记语言。它以标记的形式编写&#xff0c;该标记描述了文档的结构和内容。HTML…

QT----第三天,Visio stdio自定义封装控件

目录 第三天1 自定义控件封装 源码&#xff1a;CPP学习代码 第三天 1 自定义控件封装 新建一个QT widgetclass&#xff0c;同时生成ui,h,cpp文件 在smallWidget.ui里添加上你想要的控件并调试大小 回到mainwidget.ui&#xff0c;拖入一个widget&#xff08;因为我们封装的也…

时间序列预测 — BiLSTM实现多变量多步光伏预测(Tensorflow)

目录 1 数据处理 1.1 导入库文件 1.2 导入数据集 1.3 缺失值分析 2 构造训练数据 3 模型训练 3.1 BiLSTM网络 3.2 模型训练 4 模型预测 1 数据处理 1.1 导入库文件 import time import datetime import pandas as pd import numpy as np import matplotlib.pyplot…

从有趣的AI剧情游戏《完蛋!我被名场面包围了》来看AI游戏的思考

大家好&#xff0c;我是极智视界&#xff0c;欢迎关注我的公众号&#xff0c;获取我的更多前沿科技分享 邀您加入我的知识星球「极智视界」&#xff0c;星球内有超多好玩的项目实战源码和资源下载&#xff0c;链接&#xff1a;https://t.zsxq.com/0aiNxERDq 这个话题总能引起很…

MySQL笔记-第18章_MySQL8其它新特性

视频链接&#xff1a;【MySQL数据库入门到大牛&#xff0c;mysql安装到优化&#xff0c;百科全书级&#xff0c;全网天花板】 文章目录 第18章_MySQL8其它新特性1. MySQL8新特性概述1.1 MySQL8.0 新增特性1.2 MySQL8.0移除的旧特性 2. 新特性1&#xff1a;窗口函数2.1 使用窗口…

在idea中使用maven创建dynamic web project

0、先正确安装MAVEN, TOMCAT &#xff0c;并集成到idea 1、new 一个 project&#xff0c; 使用maven的archetype-webapp创建 2、等待创建&#xff0c;会提示build success 3、给project 添加tomcat配置&#xff0c;并部署project到 tomcat 4、运行 5、OK 6、再次引入时&…

数据结构之归并排序及排序总结

目录 归并排序 归并排序的时间复杂度 排序的稳定性 排序总结 归并排序 归并排序大家只需要掌握其递归方法即可&#xff0c;非递归方法由于在某些特殊场景下边界难控制&#xff0c;我们一般很少使用非递归实现归并排序。那么归并排序的递归方法我们究竟是怎样实现呢&#xff…

算法--最小生成树和二分图

这里写目录标题 Xmind最小生成树Prim算法思想例子题解 kruskal算法思想例子题解 二分图染色法思想 二级目录二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 一级目录二级目录二级目录二级目录 Xmind 最小生成树 Prim算法 思想 对于dist数组&am…

Spring boot -- 学习HttpMessageConverter

文章目录 1. Json格式数据获取2. 为什么返回Json格式的数据2.1 注解SpringBootAppliaction2.1.1 SpringBootConfiguration2.1.2 ComponentScan2.1.3 EnableAutoConfiguration2.1.3.1 HttpMessageConvertersAutoConfiguration2.1.3.2 WebMvcAutoConfiguration 2.2 注解RestContr…

独立完成软件的功能的测试(2)

独立完成软件的功能的测试&#xff08;2&#xff09; &#xff08;12.13&#xff09; 1. 对穷举场景设计测试点&#xff08;等价类划分法&#xff09; 等价类划分法的概念&#xff1a; 说明&#xff1a;数据有共同特征&#xff0c;成功失败分类&#xff1a; 有效&#xff1a…

基于Python+WaveNet+MFCC+Tensorflow智能方言分类—深度学习算法应用(含全部工程源码)(二)

目录 前言引言总体设计系统整体结构图系统流程图 运行环境模块实现1. 数据预处理1&#xff09;数据介绍2&#xff09;数据测试3&#xff09;数据处理 相关其它博客工程源代码下载其它资料下载 前言 博主前段时间发布了一篇有关方言识别和分类模型训练的博客&#xff0c;在读者…

Python和Beautiful Soup爬虫助力提取文本内容

大家好&#xff0c;网络爬虫是一项非常抢手的技能&#xff0c;收集、分析和清洗数据是数据科学项目中最重要的部分。今天介绍如何从链接中爬取高质量文本内容&#xff0c;我们使用迭代&#xff0c;从大约700个链接中进行网络爬取。如果想直接跳转到代码部分&#xff0c;可以在下…

【JUC】二十六、Java对象内存布局和对象头

文章目录 0、前置1、对象的内存布局2、对象头之对象标记Mark Word3、对象头之类元信息4、实例数据5、对齐填充6、对象内存布局之JOL证明7、对象分代年龄8、压缩指针 0、前置 heap&#xff08;堆区&#xff09;&#xff0c;分为新生区new、养老区old、元空间Metaspace&#xff…

C语言—每日选择题—Day46

第一题 1. 下列程序段的输出结果是&#xff08;&#xff09; #include <stdio.h> int main() {int x 1,a 0,b 0;switch(x) {case 0: b;case 1: a;case 2: a;b;}printf("a%d,b%d\n", a, b);return 0; } A&#xff1a;a2,b1 B&#xff1a;a1,b1 C&#xf…

探秘机器学习核心逻辑:梯度下降的迭代过程 (图文详解)

一 需求解函数 f() 和 g()函数分别为求y值和求导数的函数。 目的&#xff1a;求该函数的最小值&#xff1a; 代码&#xff1a; import numpy as np import matplotlib.pyplot as plt f lambda x : (x - 3.5) ** 2 - 4.5 * x 10 g lambda x : 2 * (x - 3.5) - 4.5x np.l…

接口管理——Swagger

Swagger是一个用于设计、构建和文档化API的工具集。它包括一系列工具&#xff0c;如Swagger Editor&#xff08;用于编辑Swagger规范&#xff09;、Swagger UI&#xff08;用于可视化API文档&#xff09;和Swagger Codegen&#xff08;用于根据API定义生成客户端库、server stu…

SpringCloud系列(二)| Nacos的安装与配置

Nacos是阿里巴巴提供的一个开源的可作为注册中心和配置中心的SpringCloud组件。 Nacos/nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称;一个更易于构 建云原生应用的动态服务发现、配置管理和服务管理平台。 简单来说Nacos有两个核心功能&#xff0c…

深度学习中的各类评价指标

深度学习中的各类评价指标 1 Dice Loss2 Precision&#xff08;精度&#xff09;3 Recall&#xff08;召回率&#xff09;4 F-Score5 mAP 1 Dice Loss Dice Loss&#xff0c;也叫Soft Dice Coefficient&#xff0c;是一种用于图像分割任务的损失函数。它基于目标分割图像与模型…