专门做任务的网站,设计网页制作与,山东建设机械协会官方网站,wordpress下载模板怎么用Vue监视数据的原理#xff1a; 1. vue可以监视data中所有层次的数据。 2. 如何监测对象中的数据#xff1f; 通过setter实现监视#xff0c;且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性#xff0c;Vue默认不做响应式处理 (2).如需给后添加的属性做响应式 1. vue可以监视data中所有层次的数据。 2. 如何监测对象中的数据 通过setter实现监视且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性Vue默认不做响应式处理 (2).如需给后添加的属性做响应式请使用如下API Vue.set(targetpropertyName/indexvalue) 或 vm.$set(targetpropertyName/indexvalue) 3. 如何监测数组中的数据 通过包裹数组更新元素的方法实现本质就是做了两件事 (1).调用原生对应的方法对数组进行更新。 (2).重新解析模板进而更新页面。 4.在Vue修改数组中的某个元素一定要用如下方法 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse() 2.Vue.set() 或 vm.$set()
特别注意Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性
综合案例练习
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title总结数据监测/titlescript typetext/javascript src../js/vue.js/script
/head
body!-- 准备好一个容器 --div idrooth2Vue数据操作/h2hrh3学生信息/h3h3姓名{{student.name}}/h3h3年龄{{student.age}}/h3h3 v-ifstudent.sex性别{{student.sex}}/h3h3爱好/h3ulli v-for(h,index) in student.hobby :keyindex{{h}}/li/ulh3朋友们/h3ulli v-for(f,index) in student.friends :keyindex{{f.name}}--{{f.age}}/li/ulh2操作按钮,点击按钮观察数据部分的变化思考是如何实现的实现的方法有几个/h2button clickstudent.age年龄1岁/buttonbrbutton clickaddSex添加性别属性默认值男/buttonbrbutton clickstudent.sex 未知 修改性别/buttonbrbutton clickaddFriend在列表首页添加一个朋友/buttonbrbutton clickupdataFirstFriendsName修改第一个朋友的名字为张三/buttonbrbutton clickaddHobby添加一个爱好/buttonbrbutton clickupdataHobby修改第一个爱好为开车/buttonbrbutton clickremoveSmoke过滤掉爱好中的抽烟/button/div
/body
script typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{student:{name:tom,age:18,hobby:[抽烟,喝酒,烫头],friends:[{name:jerry,age:18},{name:jack,age:20}]}},methods: {addSex(){// 第一种写法// Vue.set(this.student,sex,男)//第二种写法this.$set(this.student,sex,男)},addFriend(){this.student.friends.unshift({name:wendy,age:5})},updataFirstFriendsName(){this.student.friends[0].name 张三},addHobby(){this.student.hobby.push(学习)},updataHobby(){// 第一种写法// Vue.set(this.student.hobby,0,开车)// 第二种写法this.$set(this.student.hobby,0,开车)},removeSmoke(){this.student.hobby this.student.hobby.filter((h){return h ! 抽烟})}},})/script
/html
