Vue学习之data数据对象详解

文章目录

1、data详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello Vue</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="app">
       <h2>{
   
   {person}}</h2>
    <div/>
        
    <script>
        var test = new Vue({
     
     
            el:'#app',
            data:{
     
     
                message:'Hello 皮皮虾!',
                person:{
     
     
                    name:"皮皮虾",
                    age:"15"
                },
                student:['小花','小红','小明']
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

渲染成功,但这样子我们程序员看得懂,普通用户就看不懂了,所以,我们可以通过:对象.属性来具体进行获取

在这里插入图片描述

在这里插入图片描述

上面的用户体验肯定不好,我们进行修改,如下

在这里插入图片描述


2、总结

  • Vue中用到的数据定义在data
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据是,遵守js的语法即可

博主会持续更新,有兴趣的小伙伴可以点赞、关注和收藏下哦,你们的支持就是我创作最大的动力!

Java学习从入门到大神学习目录索引

博主开源Python爬虫教程目录索引(宝藏教程,你值得拥有!)

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/llllllkkkkkooooo/article/details/108553511