大佬教程收集整理的这篇文章主要介绍了VUE学习八，数据对象加入，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
一、示范代码
// 我们的数据对象 var data = { firstname: 'CL', lastname: '张' } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ el: '#app-8', data: data }) // 获得这个实例上的 property // 返回源数据中对应的字段 console.log(vm.lastname == data.lastName); // 设置 property 也会影响到原始数据 vm.lastname = '李'; console.log(data.lastName); // ……反之亦然 data.lastName = '王'; console.log(vm.lastName);
二、效果图
三、整体代码
<!DOCTYPE HTML> <html> <head> <@H_933_60@meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>VUE简单示范</title> <script type="text/javascript" src="../js/vue.min.js" charset="utf-8"></script> </head> <body> <div id="app-8"> {{lastnamE}} </div> <script> // 我们的数据对象 var data = { firstname: 'CL', lastname: '张' } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ el: '#app-8', data: data }) // 获得这个实例上的 property // 返回源数据中对应的字段 console.log(vm.lastname == data.lastName); // 设置 property 也会影响到原始数据 vm.lastname = '李'; console.log(data.lastName); // ……反之亦然 data.lastName = '王'; console.log(vm.lastName); </script> </body> </html>
本文参考：
https://cn.vuejs.org/v2/guide/instance.html
以上是大佬教程为你收集整理的VUE学习八，数据对象加入全部内容，希望文章能够帮你解决VUE学习八，数据对象加入所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
