<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>总结Vue数据监测</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<h1>学生信息</h1>
<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="updateFriendName">修改第一个朋友的名字为：张三</button><br/>
<button @click="addHobby">添加一个爱好</button><br/>
<button @click="changeHobby">修改第一个爱好为：做模型</button><br/>
<button @click="filterHobby">过滤掉爱好中的抽烟</button><br/>
<h3>学生姓名：{{student.name}}</h3>
<h3>学生年龄：{{student.age}}</h3>
<h3 v-if="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">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
student: {
name: 'tom',
age: 18,
hobby: ['抽烟', '喝酒', '烫头'],
friends: [
{name: 'jerry', age: 35},
{name: 'tony', age: 28}
]
}
},
methods: {
addSex() {
Vue.set(this.student, "sex", "男")
},
addFriend() {
this.student.friends.unshift({name: 'honey', age: 11})
},
updateFriendName() {
// this.student.friends[0].name = "张三"
this.student.friends.splice(0,1, {name: "张三", age: 33})
},
addHobby() {
this.student.hobby.push('吃火锅')
},
changeHobby() {
// this.student.hobby.splice(0,1,'做模型')
this.$set(this.student.hobby, 0, '做模型')
},
filterHobby() {
this.student.hobby = this.student.hobby.filter((h) => {
return h !== "抽烟"
})
}
}
})
</script>
</html>