目录
前言
在页面中动态展示数据
哪个配置项可以给模板语句提供数据
如何将data中的数据插入到模板语句中
如果data中的key:value对，value为对象时，如何取出其中的数据插入到模板语句中
如果data中的key:value对，value为数组时，并且每一个元素为对象，如何取出其中的数据插入到模板语句中
前言
本文介绍在Vue中的动态数据来源，以及如何使用
在页面中动态展示数据
代码
<div id="app"></div><script>new Vue({template:"<h1>大家好,我是{{name}},今年{{age}}岁</h1>",data:{name:"小吴",age:22}}).$mount('#app')
哪个配置项可以给模板语句提供数据
data选项
由官网给出的api文档可以看到，data的数据类型只能是对象或者函数。并且如果是对象的话必须为纯粹的对象（含有零个或多个key:value对），如上代码
如何将data中的数据插入到模板语句中
使用Vue制定的插值语法{{}}
在插值语法中，{{data中的key}}，这样，就可以将data中的数据插入到模板语句中
如果data中的key:value对，value为对象时，如何取出其中的数据插入到模板语句中
例：
代码
<div id="app"></div><script>new Vue({template:"<h1>大家好,我是{{name}},今年{{age}}岁，是{{address.province}}人</h1>",data:{name:"小吴",age:22,address:{province:'安徽'}}}).$mount('#app')
如上代码，{{data中的key.key}}即可取出其中的数据插入到模板语句中
如果data中的key:value对，value为数组时，并且每一个元素为对象，如何取出其中的数据插入到模板语句中
例：
代码
new Vue({template:"<h1>大家好,我是{{name}},今年{{age}}岁，是{{address.province}}人。就读在{{by[0].xs}},专业是{{by[1].zy}}</h1>",data:{name:"小吴",age:22,address:{province:'安徽'},by:[{xs:'某某大学'},{zy:'软件工程'}]}}).$mount('#app')
如上，{{data中的key[所需要数据的索引号].key}}即可取出其中的数据插入到模板语句中
