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
<!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> |