前边我们的data只是传递了message: "hello vue"这么一个简单的键值对数据,data还支持很多复杂的类型
可以看到不管是json还是列表形式都是可以读取出来,方法也是很简单的,代码如下
<body id="b"> {{message}} <div id="app"> {{message}} <span>{{message}}</span><br/> <hr/> 个人资料: <span>{{person}}</span><br/> 姓名: <span>{{person.name}}</span><br/> 年龄: <span>{{person.age}}</span><br/> 性别: <span>{{person.sex}}</span><br/> <hr/> 精通技能: <span>{{language}}</span><br/> <ul> <li>{{language[0]}}</li> <li>{{language[1]}}</li> <li>{{language[2]}}</li> <li>{{language[3]}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { message: "welcome to vue!", person: { name: '战神', age: 18, sex: '男' }, language: ['java', 'python', 'spring', 'vue'] } }) </script> </body>
