2. 科技
    3. Vue学习（二十六）——Vue动态处理响应式数据

    Vue学习（二十六）——Vue动态处理响应式数据

    科技2022-08-10  98

    目录

    上一节我们学习了如何处理数组的一些方法。那么，我们想要修改了数组中的内容，页面会动态响应吗？我们看下：

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="msg"> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* Vue实例的生命周期 */ var vm = new Vue({ el: '#app', data: { msg:"", list:["西游记","三国演义","水浒传"] } }); vm.list[0] = "狂人日记" </script> </body> </html>

    我们可以看到，即使数据被修改了，但页面还是无法动态响应。Vue给我们提供了动态处理响应式数据的API，我们可以用来修改数组元素或者对象属性。如下：

    Vue.set(vm.items, indexOfItem, newValue) -----Vue形式vm.$set(vm.items, indexOfItem, newValue)------Vue实例形式

    ① 参数一表示要处理的数组名称或对象名称 ② 参数二表示要处理的数组的索或者对象属性 ③ 参数三表示更改后的数组或对象的值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="msg"> <ul> <li v-for="item in list">{{item}}</li> </ul> <div>{{user.name}}</div> <div>{{user.age}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* Vue实例的生命周期 */ var vm = new Vue({ el: '#app', data: { user:{ name:"macay", age:"20" }, list:["西游记","三国演义","水浒传"] } }); Vue.set(vm.user,"age",25); vm.$set(vm.list,0,"朝花夕拾") </script> </body> </html>

    可以看到数据已经动态响应了。

    Processed: 0.014, SQL: 8