当前阅读教程:Vue.JS入门教程 > 示例:data内容的另外一种定义方式 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 示例:Vue中变量的显示和自定义方法(函数)使用 | 下一篇: 示例-前缀 $ 的使用 |
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js 起步-data内容的另外一种定义方式</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <!--显示变量site的值:“淘宝网”--> <h2>网站名称:{{site}}</h2> <!--显示变量url的值:“www.taobao.com”--> <h3>网站网址:{{url}}</h3> </div> <script type="text/javascript"> // 我们的数据对象 var mydata = { site: "淘宝网", url: "www.taobao.com"} var vm = new Vue({ el: '#app', //app为前面div区块的id的值,通过"#"号绑定 //data区域定义属性/变量的值,我们的数据对象 data:mydata }) // 它们引用相同的对象! document.write(vm.site === mydata.site); // 返回值true document.write("<br>"); // 设置属性也会影响到原始数据 vm.site = "淘宝网-变更为-xx网"; document.write(mydata.site + "<br>") </script> </body> </html> 效果图 |
|
上一篇: 示例:Vue中变量的显示和自定义方法(函数)使用 | 下一篇: 示例-前缀 $ 的使用 |