1、在HTML结构中获取data数据时，不用关注data这个大对象，只要关注里面具体的值就行
<div id="app">
<h1>{{msg}}</h1>
<h1>{{city[0]}}</h1>
<ul>
<li v-for=‘item in city‘>{{item}}</li>
</ul>
<ul>
<li v-for=‘items in people‘>{{items.name}}{{items.age}}{{items.hobby}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const test = new Vue({
el: ‘#app‘,
data: {
msg: ‘hello word‘, // 关注data里面具体值。
city: [‘北京‘, ‘上海‘, ‘广州‘, ‘深圳‘],
people: [
{ name: ‘张三‘, age: 12, hobby: ‘ball‘ },
{ name: ‘李四‘, age: 22, hobby: ‘bball‘ },
{ name: ‘王五‘, age: 32, hobby: ‘fball‘ },
]
}
})
</script>
也可以将data数据放到外面对象里面。
const obj = {
msg: ‘hello word‘,
city: [‘北京‘, ‘上海‘, ‘广州‘, ‘深圳‘],
people: [
{ name: ‘张三‘, age: 12, hobby: ‘ball‘ },
{ name: ‘李四‘, age: 22, hobby: ‘bball‘ },
{ name: ‘王五‘, age: 32, hobby: ‘fball‘ }],
};
const test = new Vue({
el: ‘#app‘,
data: obj,
})
原文：https://www.cnblogs.com/wan520/p/14849076.html