当前位置: 首页 > news >正文

Vue中对对象内容调用的Demo

目录

1.对象作为数据:

 2.对象数组


在Vue中,你可以通过对象的键来调用对象中的各个部分的内容。下面是一些使用Vue调用对象各部分内容的示例:

1.对象作为数据:


如果你在Vue实例的数据中有一个对象,你可以使用点语法来访问对象中的各个属性。

data() {return {person: {name: 'John',age: 25,occupation: 'Developer'}}
}

在模板中,你可以通过{{ person.name }}{{ person.age }}{{ person.occupation }}来分别调用对象中的nameageoccupation属性的值。

<p>Name: {{ person.name }}</p>
<p>Age: {{ person.age }}</p>
<p>Occupation: {{ person.occupation }}</p>

 2.对象数组

如果对象是一个数组中的一部分,你可以使用v-for指令遍历数组,并通过点语法调用对象中的属性。

data() {return {people: [{ name: 'John', age: 25, occupation: 'Developer' },{ name: 'Jane', age: 30, occupation: 'Designer' },{ name: 'Mike', age: 35, occupation: 'Manager' }]}
}

在模板中,用v-for指令遍历数组,并使用点语法调用对象的属性。

<ul><li v-for="person in people"><p>Name: {{ person.name }}</p><p>Age: {{ person.age }}</p><p>Occupation: {{ person.occupation }}</p></li>
</ul>

通过上述方式,你可以调用对象中各个部分的内容,无论是单个对象还是对象数组。

http://www.lryc.cn/news/106468.html

相关文章:

  • 语音识别 — 特征提取 MFCC 和 PLP
  • BES 平台 SDK之按键的配置
  • 【Golang系统开发】搜索引擎(1) 如何快速判断网页是否已经被爬取
  • 记录--一个好用的轮子 turn.js 实现仿真翻书的效果
  • 《Spring Boot源码解读与原理分析》书籍推荐
  • C++ 什么时候使用 vector、list、以及 deque?
  • 视频创作者福音,蝰蛇峡谷NUC12SNKI7视频剪辑测评
  • 使用Qt中的QDir类进行目录操作
  • qt服务器 网络聊天室
  • meanshift算法通俗讲解【meanshift实例展示】
  • 正交变换和仿射变换
  • Electron 多端通信桥 MessageChannelMain和 MessagePortMain 坑点汇集
  • Html5播放器按钮在移动端变小的问题解决方法
  • Rust 开发环境搭建【一】
  • C# Blazor 学习笔记(3):路由管理
  • int[]数组转Integer[]、List、Map「结合leetcode:第414题 第三大的数、第169题 多数元素 介绍」
  • vue子传父的一种新方法:this.$emit(‘input‘, value)可实现实时向父组件传值
  • 【Web】web
  • css中的bfc是什么?
  • 【前端知识】React 基础巩固(四十四)——其他Hooks(useContext、useReducer、useCallback)
  • 华为云hcip核心知识笔记(数据库服务规划)
  • 【有趣的】关于Map的一些小测试
  • 【MATLAB第63期】基于MATLAB的改进敏感性分析方法IPCC,拥挤距离与皮尔逊系数法结合实现回归与分类预测
  • AI 绘画Stable Diffusion 研究(二)sd模型ControlNet1.1 介绍与安装
  • 接口参数设计原则
  • 网络安全防护利器:SK5代理与IP代理的技术对比
  • IDEA删除本地git仓库、创建本地git仓库、关联其他仓库并上传
  • JavaEE简单示例——在使用Tomcat的时候可能出现的一些报错
  • webrtc的线程模型
  • 数据库备份还原-mysqldump、mydumper、xtrabackup、压缩