Vue的数据来源详解

news2024/11/24 18:19:43

前言

在页面中动态展示数据

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

如何将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')