Vue3-13- 【v-for】循环一个对象

说明

v-for 这个东西就很神奇,可以遍历一个对象,
当然,它遍历对象是通过 对象的属性名,遍历对象的属性值。

语法格式如下 :
v-for="(value,key,index) in objName"
value : 属性的值
key :属性的key (可选)
index : 索引 (可选)

使用案例

<template>
  
   <!-- v-for 遍历对象 -->
    <div v-for="(value,key,index) in stu">
        {{ index }} - {{ key }} - {{ value }}
    </div>
 
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 定义一个对象
    const stu = ref({
        id:100,
        name:'小红',
        age:12
    } )
    
</script>
    
<style scoped>
</style>

运行效果:

在这里插入图片描述

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

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

相关文章

商品规格的实现

在商城项目中购买商品或者添加购物车的时候都会让我们去选择商品的规格,颜色、尺码、风格等,这里把刚做完的此功能代码记录下,方便以后查阅: <template><view><u-navbar title="测试"></u-navbar><view class="content"&g…

多篇整合版:最全电商erp系统接口测试实战

之前我们讲了电商ERP系统接口简介以及如何使用post方式获取接口请求 &#xff0c;今天我们来讲解如何用JMeter实现接口功能、性能测试。 内容&#xff1a; JMeter实现接口功能测试 JMeter实现接口的性能测试 JMeter实现接口功能测试 企业性能测试编写脚本过程&#xff1a;接口…

java学生选课系统 数据库版

首先让我们创建一个数据库 让我们向表中插入数据然后查询它

WSL 配置 Docker 内存和 CPU 资源限制

我用的电脑一共有40G内存&#xff0c;最近发现电脑重启后&#xff0c;VmmemWSL 进程很快就会占用一多半的内存&#xff08;20G&#xff09;&#xff0c;电脑中有多个停止运行的容器&#xff0c;正常启动状态的只有一个 MySQL 服务&#xff0c;通过 docker stats 查看占用内存也…

【详解优先级队列(堆)】

目录 堆的概念 堆的性质 堆的存储方式 堆的创建 堆的向下调整 向下过程(以小堆为例) 向下过程(以大堆为例) 建堆的时间复杂度O(n) 堆的插入与删除 堆的插入 向上调整建堆的时间复杂度O(nlogn) 堆的删除 常见习题 常用接口介绍 PriorityQueue的特性 Pri…

实战1-python爬取安全客新闻

一般步骤&#xff1a;确定网站--搭建关系--发送请求--接受响应--筛选数据--保存本地 1.拿到网站首先要查看我们要爬取的目录是否被允许 一般网站都会议/robots.txt目录&#xff0c;告诉你哪些地址可爬&#xff0c;哪些不可爬&#xff0c;以安全客为例子 2. 首先测试在不登录的…

使用MIB builder自定义物联网网关的MIB结构

文章目录 物联网网关初识&#xff08;了解即可&#xff09;IoT的通用MIB库结构MIB Builder开发流程指导问题总结子叶没所属分组值范围不为0 物联网网关初识&#xff08;了解即可&#xff09; 网关又称网间连接器、协议转换器。简单说&#xff0c;物联网网关是一台智能计算机&a…

【Java】网络编程-UDP回响服务器客户端简单代码编写

这一篇文章我们将讲述网络编程中UDP服务器客户端的编程代码 1、前置知识 UDP协议全称是用户数据报协议&#xff0c;在网络中它与TCP协议一样用于处理数据包&#xff0c;是一种无连接的协议。 UDP的特点有&#xff1a;无连接、尽最大努力交付、面向报文、没有拥塞控制 本文讲…

《算法通关村——回溯模板如何解决回溯问题》

《算法通关村——回溯模板如何解决回溯问题》 93. 复原 IP 地址 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 . 分隔。 例如&#xff1a;"0.1.2.201" 和 "192.1…

IDEA2023找不到add framework support怎么解决

问题: 我的idea版本是2023.01&#xff0c;新版idea右键项目没有Add Framework Support&#xff0c;help里面也找不到相关的。 从project structue的facets里面添加就行了&#xff0c;都是一样的。 1.依旧是新建一个项目 2.file-->project structure--->facets 左上角加…

JavaEE 09 锁策略

1.锁策略 1.1 乐观锁与悲观锁 其实前三个锁是同一种锁,只是站在不同的角度上去进行描述,此处的乐观与悲观其实是指在预测的角度上看会发生锁竞争的概率大小,概率大的则是悲观锁,概率小的则是乐观锁 乐观锁在加锁的时候就会做较少的事情,加锁的速度较快,但是消耗的cpu资源等也会…

crmeb v5自动生成代码报错(adminInfo方法或404路由不存在的问题)

404 现象 调试器中出现了404 , 那肯定是路由出了问题,也就是说,crmeb 为我们生成的路由没有对应的加载上,先来看一下, 自动代码为我们生成的路由是什么样子的 所以有一种最简单的解决办法,就是 把 新生成的路由文件从子目录中挪出一级来,就可以解决404的问题了 下面来说…

python学习:浅拷贝与深拷贝详解

copy 一、 & is二、浅拷贝 & 深拷贝(一)、浅拷贝(二)、深拷贝 三、问题 一、’ ’ & ‘is’ ’ 和is是python对象比较常用的两种方式,简单来说,‘ ‘操作符比较对象之间的值是否相等,如 a b 而’is’操作符比较的是对象的身份标识是否相等,即它们是否是同一个…

「玩转 TableAgent 数据智能分析」实战数据分析演练

文章目录 前言TableAgent 功能亮点人人都是数据分析师融合创新应用的新成果 TableAgent 使用介绍登陆功能介绍申请认证 实战数据集分析一导入 CSV 文件数据发起提问TableAgent 应答结果贴切的服务推荐问题提问 实战数据集分析二分析结果分析哪个城市的未来人口最多 总结 TableA…

linux高级管理——访问MYSQL数据库

一、认识数据库系统&#xff1a; MySQL数据库系统也是一个典型的C/S(客户端/服务器&#xff09;架构的应用&#xff0c;要访问MySQL数据库需要使用专门的客户端软件。在Linux系统中&#xff0c;最简单、易用的MySQL客户端软件是其自带的mysql命令工具。 1&#xff0e;登录到My…

光伏开发设计施工一体化系统都有哪些功能?

随着全球对可再生能源的需求不断增加&#xff0c;光伏行业得到了快速发展。同时也面临着一些挑战&#xff0c;例如初始投资成本高、需要大量土地和水资源等。鹧鸪云光伏与储能软件利用技术创新&#xff0c;促进光伏行业数字化升级。 一、智能测算 1.投融资表&#xff1a;采用…

【FPGA/verilog -入门学习6】verilog频率计数器

需求 在使能信号控制下&#xff0c;计算输入脉冲的每两个上升沿之间的时钟周期数并输出&#xff0c;即输出脉冲频率的计数值 输入信号 周期性脉冲信号&#xff1a;需要做检测的脉冲频率信号 使能信号&#xff1a;高电平进行频率计数&#xff0c;低电平清零计数器 输出信号 计数…

bootstrap:下拉菜单

<!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>下拉菜单DEMO</title> <link rel"stylesheet" type"text/css" href"/cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"…

TCP/IP详解——网络基本概念

文章目录 一、网络基本概念1. OSI 7层模型1.1 每层对应的协议1.2 每层涉及的设备1.2.1 物理层设备1.2.2 数据链路层设备1.2.3 网络层设备1.2.4 传输层设备1.2.5 交换机和路由器的应用1.2.6 问题 2. TCP/IP 4层模型3. 物理层传输介质3.1 冲突域 4. 数据链路层4.1 以太网帧结构4.…

​flutter 代码混淆

Flutter 应用混淆&#xff1a;Flutter 应用的混淆非常简单&#xff0c;只需要在构建 release 版应用时结合使用 --obfuscate 和 --split-debug-info 这两个参数即可。–obfuscate --split-debug-info 用来指定输出调试文件的位置&#xff0c;该命令会生成一个符号映射表。目前支…