Vue学习之data数据对象详解

文章目录1、data详解2、总结1、data详解<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>hello Vue</title></head><script src="https://cdn.jsdelivr.net/npm

Code皮皮虾

3822人浏览 · 2020-09-12 19:12:13

Code皮皮虾 · 2020-09-12 19:12:13 发布

文章目录

- 1、data详解
- 2、总结

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爬虫教程目录索引（宝藏教程，你值得拥有！）

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^