Vue 知识点:Vue监测数据的原理—数组
<div id="root">
<h1>学校信息</h1>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<hr/>
<h1>学生信息</h1>
<button @click="addSex">添加一个性别属性,默认是男</button>
<h2>姓名:{{student.name}}</h2>
<h2 v-if="student.sex">性别:{{student.sex}}</h2>
<h2>年龄:真实:{{student.age.rAge}} --- 对外 {{student.age.sAge}}</h2>
<h2>朋友们</h2>
<ul>
<li v-for="(f,index) in student.friends">
{{f.name}} --- {{f.age}}
</li>
</ul>
<h2>爱好:</h2>
<ul>
<li v-for="(h,index) in student.hobbys">
{{h}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
name:'atatat',
address:'shanghai',
student:{
name:'张丹',
age: {
rAge: 20,
sAge: 18
},
hobbys:['抽烟','喝酒','烫头'],
friends:[
{
name:'王丹',
age:22,
},
{
name:'李丽',
age:21,
}
]
},
},
methods:{
addSex(){
Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
}
}
})
</script>