全局API之Vue.set 监听数据层的数据变化
Vue.set` Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新。
Vue.set用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
如果数据源是数组
第一个参数是数组，第二个是索引，第三个是索引对应的值
格式：this.$set(target,index,value)
格式1：this.$set(this.数组名,索引,值)
格式2：this.$set(this.数组名.push("添加的值"))
例题练习
要求：点击一下添加按钮，就会在数组最后一位的基础上加1，添加到数组里，并实时显示到页面上
<!--点击一下添加按钮，就会在数组最后一位的基础上加1，添加到数组里，并实时显示到页面上--> <body> <div id="app"> <button @click="adds">添加</button> <button @click="update">修改</button> <p v-for="value in itme"> {{value}}</p> </div> <script> var vm=new Vue({ el:"#app", data:{ num:2, itme:[1,2] }, methods:{ adds(){ this.num++ this.$set(this.itme.push(this.num)) }, update(){ //把数组itme下标为0的值修改成了"数组下标为0的变成了我！" this.$set(this.itme,0,"数组下标为0的变成了我！") } } }) </script> </body>
如果数据源是对象
第一个参数是对象，第二个是属性名，第三个是属性对应的值
格式：Vue.set(target,"key",value)
格式1：Vue.set(vm.对象名,"对象属性",对象值)
格式2：this.$set(this.对象名,"对象属性",对象值)
例题练习
要求：点击一下修改按钮，就会更改对象里的数据，并实时显示到页面上
<!--点击一下修改按钮，就会更改对象里的数据，并实时显示到页面上--> <body> <div id="app"> <button @click="update">修改</button> <table border="1"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>{{stundent.name}}</td> <td>{{stundent.sex}}</td> <td>{{stundent.age}}</td> </tr> </table> </div> <script> var vm=new Vue({ el:"#app", data:{ stundent:{ name:"张三", sex:"女", age:18 } }, methods:{ update(){ //使用this一定要加上$符号 this.$set(this.stundent,"name","李四") //Vue不用加$符号，vm就是本题的vue对象 Vue.set(vm.stundent,"sex","男") Vue.set(this.stundent,"age",30) } } }) </script> </body>
