Vue22 Vue监测数据改变的原理_数组

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理_数组</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称:{{school.name}}</h2>
			<h2>学校地址:{{school.address}}</h2>
			<h2>校长是:{{school.leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="addSex">添加一个性别属性,默认值是男</button>
			<h2>姓名:{{student.name}}</h2>
			<h2 v-if="student.sex">性别:{{student.sex}}</h2>
			<h2>年龄:真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
			<h2>爱好</h2>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>
</html>

在这里插入图片描述

笔记

直接通过索引改变数组的值不生效,需要使用Vue封装好的以下方法,操作数组。
在这里插入图片描述

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

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

相关文章

如何避免发送HTTP请求

资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) 如何避免发送HTTP请求? 这个思路你看到是不是觉得很奇怪&#xff0c;不发送 HTTP 请求&#xff0c;那客户端还怎么和服务器交互数据?小林你这不是要流氓嘛? 冷静冷静&#xff0c;你说的没错&#xf…

jmeter-12jmeter的录制功能

文章目录 什么情况下使用录制功能?操作流程具体设置如下观察结果什么情况下使用录制功能? 在测试过程中,很多时候可能会没有接口文档,这样你不知道请求方式,url,等等如何进行测试? jmeter提供了对应的录制功能。录制功能可以抓到具体的接口信息 操作流程 创建线程组 …

Pandas 数据处理:从基础到高级的完整指南【第84篇—Pandas 数据处理】

Pandas 数据处理&#xff1a;从基础到高级的完整指南 Pandas 是一个强大的数据分析工具&#xff0c;广泛应用于数据科学、机器学习和统计分析等领域。本文将介绍 Pandas 模块的基础知识&#xff0c;包括数据结构、数据导入、数据选择与过滤等方面&#xff0c;通过实际代码示例…

R语言课程论文-飞机失事数据可视化分析

数据来源&#xff1a;Airplane Crashes Since 1908 (kaggle.com) 代码参考&#xff1a;Exploring historic Air Plane crash data | Kaggle 数据指标及其含义 指标名 含义 Date 事故发生日期(年-月-日) Time 当地时间&#xff0c;24小时制&#xff0c;格式为hh:mm Locat…

Android 11以上获取不到第三方app是否安装

开年第一篇&#xff0c;处理了一下年前的小问题。 问题&#xff1a;本地app跳转到第三方app地图进行导航&#xff0c;获取不到第三方地图是否安装。 解决&#xff1a; 1.添加包名 This can be done by adding a <queries> element in the Android manifest.在app下的…

红队打靶练习:IMF: 1

目录 信息收集 1、arp 2、nmap 3、nikto 目录探测 gobuster dirsearch WEB 信息收集 get flag1 get flag2 get flag3 SQL注入 漏洞探测 脱库 get flag4 文件上传 反弹shell 提权 get flag5 get flag6 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# a…

【力扣hot100】刷题笔记Day5

前言 回学校了&#xff0c;荒废了半天之后打算奋发图强猛猛刷题&#xff0c;找实习&#xff01;赚钱&#xff01;&#xff01; 560. 和为 K 的子数组 - 力扣&#xff08;LeetCode&#xff09; 前缀法 哈希表 这个题解解释比官方清晰&#xff0c;截个图方便看&#xff0c;另一…

慎投!2023年共124本SCI/SSCI被剔除汇总(附电子档下载目录)

2023年SCI/SSCI剔除期刊汇总 2023年3月20日&#xff0c;Web of Science核心期刊目录再次更新&#xff01;共有50本期刊被剔除出SCIE & SSCI期刊目录&#xff0c;其中大部分为Hindawi旗下期刊&#xff08;19本&#xff09;&#xff0c;引起不小的轰动&#xff01; 2023年全…

数据结构之时空复杂度

一、前言 1&#xff09;什么是数据结构 数据结构(Data Structure)是计算机存储、组织数据的方式&#xff0c;指相互之间存在一种或多种特定关系的数据元素的 集合。 2&#xff09;什么是算法 算法(Algorithm):就是定义良好的计算过程&#xff0c;他取一个或一组的值为输入&am…

计算机网络——14CDN

CDN 视频流化服务和CDN&#xff1a;上下文 视频流量&#xff1a;占据着互连网大部分的带宽 Netflix&#xff0c;YouTube&#xff1a;占据37%&#xff0c;16%的下行流量 挑战&#xff1a;规模性-如何服务~1B用户&#xff1f; 单个超级服务器无法提供服务&#xff08;为什么&am…

备战蓝桥杯---数学之博弈论基础1

目录 1.对称博弈 2.巴什博弈&#xff1a; 3.NIM博弈&#xff1a; 注意一个法则&#xff1a; 1.对称博弈 我们先看一个经典的例子&#xff1a; 下面是分析&#xff1a; 2.巴什博弈&#xff1a; 我们只要先手取1个&#xff0c;然后先手再去取5-刚刚后手的数字即可。 当石子数…

SHERlocked93 的 2021 年终总结

我还是和往年一样&#xff0c;总结发的又晚了一点&#xff0c;为什么又发这么晚呢&#xff0c;因为懒 年终总结 疫情之后时间时间过的太快了&#xff0c;不知道是不是只有我这样感觉。 四五月份去兰州玩了下&#xff08;其实是出差&#xff09;&#xff0c;终于看到了黄土高原&…

机器视觉与嵌入式技术:开拓自动驾驶和远程监控新视野

&#xff08;本文为简单介绍&#xff0c;观点源于网络&#xff09; 机器视觉系统是指利用计算机来模拟人眼的识别与判断。在自动驾驶和远程监控领域&#xff0c;机器视觉结合嵌入式技术的应用&#xff0c;不仅极大地提升了自动化水平&#xff0c;而且开辟了新的技术视野。 在…

迅为3A5000_7A2000开发板龙芯自主指令系统支持PCIE3.0、USB3.0、SATA3.0、HDMI、VGA等

性能强 采用全国产龙芯3A5000处理器&#xff0c;基于龙芯自主指令系统 (LoongArch)的LA464微结构&#xff0c;并进一步提升频率&#xff0c;降低功耗&#xff0c;优化性能。 桥片 采用龙芯 7A2000&#xff0c;支持PCIE 3.0、USB 3.0和 SATA 3.0.显示接口2 路、HDMI 和1路 VGA…

【ArcGIS微课1000例】0103:导出点、线、面要素的折点坐标值

点要素对应的是一个或者若干个坐标,线要素对应的是对个坐标值对应的点连起来,面要素是多个坐标值对应的点连起来构成的封闭多边形。本文讲述导出点的坐标值。 文章目录 一、点要素坐标导出1. 计算点坐标2. 导出点坐标二、线要素坐标导出1. 生成线要素折点2. 计算折点坐标3. 导…

一款服务于医院临床数据资源建设的平台,助力医疗信息化发展

随着医疗技术的不断发展&#xff0c;医院需要越来越多的临床数据来支持科研、教学和临床实践。然而&#xff0c;在传统的医疗系统中&#xff0c;数据分散、信息割裂、无法有效整合和共享。为了解决这一问题&#xff0c;临床数据资源整合平台应运而生。 临床数据资源整合平台是…

C++之内存对齐

目录 内存对齐 一、内存对齐解释 二、为什么要内存对齐&#xff1f; 三、内存对齐的三大规则 3.1、数据成员对齐规则 3.2、结构(或联合)的整体对齐规则 3.3、结构体作为成员 3.4、代码例子 内存对齐 一、内存对齐解释 对齐规则是按照成员的声明顺序&#xff0c;依次安排…

openGauss学习笔记-221 openGauss性能调优-确定性能调优范围-分析作业是否被阻塞

文章目录 openGauss学习笔记-221 openGauss性能调优-确定性能调优范围-分析作业是否被阻塞221.1 操作步骤 openGauss学习笔记-221 openGauss性能调优-确定性能调优范围-分析作业是否被阻塞 数据库系统运行时&#xff0c;在某些业务场景下查询语句会被阻塞&#xff0c;导致语句…

vue2+高德地图web端开发(二)

前言&#xff1a; 高德地图输入提示与 POI 搜索相关文档&#xff1a;输入提示与 POI 搜索-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API (amap.com) 输入提示-输入提示-示例中心-JS API 2.0 示例 | 高德地图API (amap.com) 创建输入框&#xff1a; 引入Element组…

java设计模式之解释器模式

解释器模式&#xff08;Interpreter Pattern&#xff09; 1.基本介绍 在编译原理中&#xff0c;一个算术表达式通过词法分析器形成词法单远&#xff0c;而这些词法单远再通过语法分析器构建语法分析树&#xff0c;最终形成一颗抽象的语法分析树&#xff0c;&#xff08;词法分…