代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue数据监视</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>学生信息</h2>
<button @click="student.age++">年龄+1岁</button><br/>
<button @click="addSex">添加性别属性，默认值：男</button><br/>
<button @click="student.sex='女'">修改性别</button><br/>
<button @click="addFriend">在列表首位添加一个朋友</button><br/>
<button @click="changeFirstFriendName">修改第一个朋友的名字为：张三</button><br/>
<button @click="addHobby">添加一个爱好</button><br/>
<button @click="changeFirstHobby('开车')">修改第一个爱好为开车</button><br/>
<button @click="removeHobby('跑步')">过滤掉一个爱好</button><br/>
<h3>姓名：{{student.name}}</h3>
<h3>年龄：{{student.age}}</h3>
<h3 v-show="student.sex">性别：{{student.sex}}</h3>
<h3>爱好：</h3>
<ul>
<li v-for="(h, index) in student.hobby" :key="index">{{h}}</li>
</ul>
<h3>朋友们：</h3>
<ul>
<li v-for="(f, index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
student:{
name:'tom',
age: 20,
hobby:['游戏', '跑步', '写代码'],
friends:[
{name:'jerry', age:35},
{name:'tony', age:26}
]
}
},
methods:{
addSex(){
this.$set(this.student, 'sex', '男')
},
addFriend(){
this.student.friends.unshift({name:'jack', age:29})
},
changeFirstFriendName(){
this.student.friends[0].name = "张三"
},
addHobby(){
this.student.hobby.push('学习')
},
changeFirstHobby(h){
// this.$set(this.student.hobby, 0, h)
// Vue.set(this.student.hobby, 0, h)
this.student.hobby.splice(0, 1, h)
},
removeHobby(reHobby){
this.student.hobby = this.student.hobby.filter((h)=>{
return h !== reHobby
})
}
}
})
</script>
</html>
运行结果如下：
