You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.5 KiB
76 lines
2.5 KiB
3 years ago
|
<!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>
|