发布于：2023-05-27 21:47:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="assets/js/vue.js"></script>
<title>037_尚硅谷Vue技术_总结Vue监视数据</title>
</head>
<style>
button{ margin-bottom: 15px;}
</style>
<body>
<hr>
<div id="app">
<h1>学校信息</h1></h1>
<button @click="student.age++">年龄加+1</button> <br/>
<button @click="addSex">添加性别属性，默认值是：男</button><br/>
<button @click="student.sex='未知' ">修改性别</button><br/>
<button @click="addFriennd">在列表首位添加一个朋友</button><br>
<button @click="modiyFriennd">修改第一个的朋友名字为：张三</button><br>
<button @click="addHobby">添加一个爱好</button><br>
<button @click="modiyHobby">修改第一个爱好为：开车</button><br>
<button @click="removeSomke">过滤抽烟</button><br>
<h3>姓名：{{student.name}}</h3>
<h3>年龄：{{student.age}}</h3>
<h3 v-if="student.sex">性别：{{student.sex}}</h3>
<h3>爱好：</h3>
<ul>
<li v-for="(item,index) in student.hobby" :key="index">
{{item}}
</li>
</ul>
<h3>朋友们：</h3>
<ul>
<li v-for="(item,index) in student.friends" :key="index">
{{item.name}}--{{item.age}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:'#app',
data:{
student:{
name:"tom",
age:"18",
hobby:['抽烟','喝酒','烫头'],
friends:[
{name:"tony",age:30},
{name:"jonde",age:36},
]
}
},
methods: {
addSex(){
//Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
},
addFriennd(){
this.student.friends.unshift({name:"duoer",age:18});
},
modiyFriennd(){
this.student.friends.splice(0,1,{name:"张三",age:55}) //修改第一个的朋友名字为：张三
},
addHobby(){
this.student.hobby.push("钓鱼");
},
modiyHobby(){
//this.student.hobby.splice(0,1,"开车");
this.$set(this.student.hobby,0,'开车')
},
removeSomke(){
this.student.hobby= this.student.hobby.filter((h)=>{
return h!=="抽烟"
})
}
},
})
</script>
</body>
</html>
阅读 150+
10
