<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>学生信息</h2> <button @click="student.age++">年龄+1岁</button><br><br> <button @click="addSex">添加属性默认值是男</button><br><br> <button @click="student.sex='未知' ">修改性别</button><br><br> <button @click="addFriend">在列表的首位添加一个朋友</button><br><br> <button @click="updateFriend">修改第一个朋友的名字为张飒</button><br><br> <button @click="addhobby">添加一个爱好</button><br><br> <button @click="updatehobby">修改第一个爱好为开车</button><br><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> <script> const vm = new Vue({ el: '#root', data: { student: { name: '张三', age: 18, hobby: ['抽烟', '喝酒', '烫头'], friends: [{ name: '小王', age: 20 }, { name: '李四', age: 22 }] } }, methods: { addSex() { this.$set(this.student, 'sex', '男') // Vue.set(this.student, 'sex', '男') }, addFriend() { this.student.friends.unshift({ name: 'jack', age: 26 }) }, updateFriend() { this.student.friends[0].name = '张飒' }, addhobby() { this.student.hobby.push('打球') }, updatehobby() { this.student.hobby.splice(0, 1, '开车') } } }) </script> </body> </html>
