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

实例

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理_数组title>
		
		<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>

Vue22 Vue监测数据改变的原理_数组_第1张图片

笔记

直接通过索引改变数组的值不生效,需要使用Vue封装好的以下方法,操作数组。
Vue22 Vue监测数据改变的原理_数组_第2张图片

你可能感兴趣的:(Vue,vue.js,javascript,前端)