Vue 知识点：Vue监测数据的原理---数组

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>