2021-06-26 Vue学习—data：数据对象

最新推荐文章于 2023-06-29 14:42:29 发布

中秋秋

最新推荐文章于 2023-06-29 14:42:29 发布

阅读量965

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43733053/article/details/118242849

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue学习—data：数据对象

定义

Vue中用到的数据定义在data中

数据类型

data中可以写复杂类型的数据

渲染语法

渲染复杂的类型数据时，遵守js的语法即可

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础学习</title>
</head>
<body>
    <div id="app">
        {{ message }}
        <h2> {{ info.name }} {{ info.Email }}</h2>
        <ul>
            <li>{{ friends[0] }}</li>
            <li>{{ friends[1] }}</li>
            <li>{{ friends[2] }}</li>
        </ul>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
            message: 'Hello Vue!',
            info:{
                name : "李龙宇",
                Email:"xingshacm@yeah.net"
            },
            friends:[
                "小黑","小白","小红"
            ]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

中秋秋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-26 Vue学习—data：数据对象

Vue学习—data：数据对象定义Vue中用到的数据定义在data中数据类型data中可以写复杂类型的数据渲染语法渲染复杂的类型数据时，遵守js的语法即可代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
复制链接

扫一扫

专栏目录