自定义数组,循环展示对象数据

HTML

<div v-for="(item, index) in dataList" :key="index">

        <span>{{ item.title }}:</span>

        <span>{{ dataInfo[item.content] }}</span>

</div>

JS

需要展示的键值对放入数组中

let dataList = [

  {

    title: 'data1',

    content: 'data'

  },

  {

    title: 'data2',

    content: 'content'

  },

  {

    title: 'data3',

    content: 'message'

  }

]

对象信息

let dataInfo = {

  data: '数据',

  content: '内容',

  message: '信息'

}

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

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

相关文章

【Go】Go语言基础内容

变量声明&#xff1a; 变量声明&#xff1a;在Go中&#xff0c;变量必须先声明然后再使用。声明变量使用 var 关键字&#xff0c;后面跟着变量名和类型&#xff0c;如下所示&#xff1a; var age int这行代码声明了一个名为 age 的整数变量。 变量初始化&#xff1a;您可以在声…

Python面向对象②:属性与方法【侯小啾Python基础领航计划 系列(二十)】

Python面向对象②:属性与方法【侯小啾Python基础领航计划 系列(二十)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ�…

Centos系列:shell编程综合练习(个人学习记录)

shell编程综合练习&#xff08;个人学习记录&#xff09; shell编程until 循环跳出循环1. break命令2. continue 命令 Shell函数特殊变量输入输出重定向输出重定向输入重定向重定向 Shell实战监控centos7运行状态/proc/stat文件编写脚本free命令监控系统内存 shell编程 until …

【已解决】xxljob连接报错HTTP 302(HTTP 401账号或密码错误)

目录 问题现象&#xff1a; 问题分析&#xff1a; 1、密码中的特殊字符。 2、密码长度问题。 解决方法&#xff1a; 拓展&#xff1a; 问题现象&#xff1a; 今天在生产环境使用xxljob任务调度来创建并执行任务时&#xff0c;出现了程序报错&#xff1a; 通过查询xxljob日志…

Java集合(已重写-废弃了)

# 精辟总结 其实各种八股文资料&#xff0c;他也就是围绕着核心知识展开提问的&#xff0c;你只要根据八股文把核心知识提炼出来&#xff0c;形成核心知识体系&#xff01; Java集合那是重点中的重点。最基本的概念要懂&#xff0c;核心的概念&#xff0c;那要滚瓜烂熟。 Ja…

TEMU跨境平台与亚马逊检测认证几大认证您知道多少?

TEMU跨境平台与亚马逊检测认证几大认证您知道多少&#xff1f; TEMU跨境平台与亚马逊对于做外贸的人应该都不陌生,可是你是否知道产品入驻TEMU跨境平台与亚马逊需要办理的13大认证呢?如果你不知道,请认真阅读正面的内容,因为它关系着你的产品能否在TEMU跨境平台与亚马逊顺利上…

Cookie、Session、Token

Cookie 什么是Cookie Cookie是服务器发送给客户端并保存在客户端本地的一小块数据&#xff0c;能够在下次发送请求时携带Cookie。 Cookie是保存在客户端的&#xff0c;按存储位置分类&#xff0c;可以分为内存Cookie和硬盘Cookie。 Cookie的应用 Cookie主要用于几个方面&a…

vite的使用

vite说是面向未来的框架&#xff0c;支持esm模块化&#xff0c;虽然可以引入require插件来支持&#xff0c;commomjs不过介意别用&#xff0c;因为老旧的包和node版本问题也很多&#xff0c;对应升级的生态nuxt3和新的需要更新node版本18 20&#xff0c; 通常搭建vite就是引入l…

ROS第一个程序——helloworld

目录 一、工作空间的创建 1.创建工作空间并初始化 2.进入 src 创建 ros 包并添加依赖 二、C实现helloworld C源码实现 编辑 ros 包下的 Cmakelist.txt文件 进入工作空间目录并编译 执行 三、python实现helloworld 进入 ros 包添加 scripts 目录并编辑 python 文件 …

【源码篇】基于SpringBoot+thymeleaf实现的蓝天幼儿园管理系统

基于SpringBootthymeleaf实现的蓝天幼儿园管理系统 文章目录 系统说明技术选型成果展示账号地址及其他说明 系统说明 基于SpringBootthymeleaf实现的蓝天幼儿园管理系统是为幼儿园提供的一套管理平台&#xff0c;可以提高幼儿园信息管理的准确性&#xff0c;系统将信息准确无误…

883重要知识点

&#xff08;1&#xff09;程序结构分三种&#xff1a;顺序结构&#xff0c;选择结构&#xff0c;循环结构。 &#xff08;2&#xff09;该程序都要从main&#xff08;&#xff09;开始&#xff0c;然后从最上面往下。 &#xff08;3&#xff09;计算机的数据在电脑中保存以二…

vue+ts实现离线高德地图 内网离线高德地图

1、下载瓦片 我是用最简单的软件下载——MapDownloader 链接&#xff1a;https://pan.baidu.com/s/1Hz__HcA5QhtGmjLNezC_pQ 提取码&#xff1a;6lek 来源&#xff1a;https://blog.csdn.net/fuhanghang/article/details/131330034 2、部署私有化瓦片资源 这里也是用最简单的…

智能变压器监控系统

智能变压器监控系统是一种先进的物联网技术和智能设备&#xff0c;能够实现对变压器的实时监测和管理&#xff0c;提高变压器的运行效率和可靠性&#xff0c;为用户提供及时、准确的变压器运行状态信息和故障预警。 力安科技A30变压器云控终端是一款集变压器温控仪、变压器运行…

【每日一题】从二叉搜索树到更大和树

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;中序遍历的反序方法二&#xff1a;后缀数组 写在最后 Tag 【中序遍历】【二叉树】【2023-12-04】 题目来源 1038. 从二叉搜索树到更大和树 题目解读 在二叉搜索树中&#xff0c;将每一个节点的值替换成树中大于等于该…

百度查询界面自定义

文章目录 起因步骤 纯个人纪录 参考以下师傅链接 爱吃猫的鱼儿-浏览器设置夜间模式以及百度搜索结果单列居中 起因 发现百度查询结果都在左边&#xff0c;想着能不能居中&#xff0c;发现已经有前辈写了插件&#xff0c;遂安装使用&#xff0c;看下效果 步骤 安装插件暴力猴…

计算机基础知识63

Django的条件查询&#xff1a;查询函数 exclude exclude&#xff1a;返回不满足条件的数据 res Author.objects.exclude(pk1) print(res) # <QuerySet [<Author: Author object (2)>, <Author: Author object (3)>]> order_by 1、按照 id 升序排序 res …

Android启动系列之进程杀手--lmkd

本文概要 这是Android系统启动的第三篇文章&#xff0c;本文以自述的方式来讲解lmkd进程&#xff0c;通过本文您将了解到lmkd进程在安卓系统中存在的意义&#xff0c;以及它是如何杀进程的。&#xff08;文中的代码是基于android13&#xff09; 我是谁 init&#xff1a;“大…

LeetCode 232.用栈实现队列

题目 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a; void push(int x) 将元素 x 推到队列的末尾 int pop() 从队列的开头移除并返回元素 int peek() 返回…

c题目14:写成一个函数,对数组进行排序

每日小语 一个人倘若需要从思想中得到快乐&#xff0c;那么他的第一个欲望就是学习。——王小波 自己思考 这不前几天刚搞的东西吗&#xff0c;就写成一个函数&#xff0c;这个有什么难的吗&#xff1f;我有时候那个分别心特重啊&#xff0c;真就别人拿到个啥好的比杀了我还难…

贸易公司ERP用什么软件好

不同行业的贸易公司有不同的业务结构和管理模式&#xff0c;日常经营管理过程中遇到的难点呈现多样化&#xff0c;而很多贸易公司在仓库、财务、销售、采购、订单、客户等业务一体化和部门协同效率等方面还有很多提升空间。 有些贸易公司涉及多仓库、多门店、多税制、多汇率、…