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

最新推荐文章于 2024-06-15 14:41:39 发布

在下，杨江河

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量570

点赞数 3

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Rockandrollman/article/details/136149264

版权

Vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

实例

<!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封装好的以下方法，操作数组。
在这里插入图片描述

在下，杨江河

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue22 Vue监测数据改变的原理_数组

直接通过索引改变数组的值不生效，需要使用Vue封装好的以下方法，操作数组。// Vue.set(this.student,'sex','男')//阻止 vue 在启动时生成生产提示。
复制链接

扫一扫