Vue之监听数据的原理详解

在这里插入图片描述

<body>
 <div id="root">
 <h1>学生的基本信息</h1>
 <button @click="student.age++">年龄+1岁</button>
 <button @click="addSex">添加性别属性默认值是男</button><br>
 <button @click="student.sex='未知' ">修改属性值</button><br>
 <button @click="addFriend">在列表的首位就添加一个朋友</button><br>
 <button @click="updateFriend">更新第一个人的名字</button><br>
 <button @click="addHobby">添加一个爱好</button><br>
 <button @click="change">修改第一个爱好为爬山</button><br>
 <button @click="removeSmoke">过滤掉抽烟</button><br>
 <h3>姓名:{{student.name}}</h3>
 <h3>年龄:{{student.age}}</h3>
 <h3 v-if="student.sex">性别:{{student.sex}}</h3>
 <h3>爱好:</h3>
 <hr>
 <ul>
 <li v-for="(h,index) in student.hobby" :key="index">{{h}}</li>
 </ul>
 <hr>
 <h3>朋友们:</h3>
 <ul>
 <li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li>
 </ul>
 </div>
 <script>
 Vue.config.productionTip = false;
 const vm = new Vue({
 el: "#root ",
 data: {
 student: {
 name: 'zhang',
 age: 18,
 hobby: ['喝酒', '抽烟', '烫头'],
 friends: [{
 name: 'li',
 age: 15
 }, {
 name: 'wang',
 age: 10
 }]
 }
 },
 methods: {
 addSex() {
 this.$set(this.student, 'sex', '男')
 // Vue.set(vm.student, 'sex', '男')
 },
 addFriend() {
 this.student.friends.unshift({
 name: 'YY',
 age: 66
 })
 },
 updateFriend() {
 this.student.friends[0].name = "小刘";
 this.student.friends[0].age = 22
 },
 addHobby() {
 this.student.hobby.push('唱歌')
 },
 change() {
 //splice添加表示从第0个开始,删除一个,新增加的值是爬山
 //注意:不能直接通过数组下标的形式进行修改 
 //this.student.hobby.splice(0, 1, '爬山')
 //Vue.set(this.student.hobby, 0, '爬山')
 this.$set(this.student.hobby, 0, '爬山')
 },
 removeSmoke() {
 //filter不影响原数组的改变
 this.student.hobby = this.student.hobby.filter((h) => {
 return h !== '抽烟'
 })
 }
 }
 })
 </script>
</body>

总结

作者:王同学要努力原文地址:https://wcaicai.blog.csdn.net/article/details/121356675

%s 个评论

要回复文章请先登录注册