Vue的数据来源详解

详解"/>

Vue的数据来源详解

目录

前言

在页面中动态展示数据

哪个配置项可以给模板语句提供数据

如何将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}}即可取出其中的数据插入到模板语句中