<template>
<div id="app">

<h1>{{msg}}</h1>
<h2>你好，Vue!</h2>

<h2>{{obj.name}}</h2>

<img :src="src">

<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<ul>
<li v-for="item in list2">{{item.title}}</li>
</ul>
<ul>
<li v-for="item in list3">
{{item.title}}
<ol>
<li v-for="type in item.typelist">
{{type.name}}---{{type.price}}
</li>
</ol>
</li>
</ul>
<router-view/>
</div>
</template>

<script>
export default {
name: 'App',
data (){
return{
msg:'你好',
src:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2476775726,1200843185&fm=27&gp=0.jpg',
obj:{
name:'刘奇拓'
},
list:['111','222','333'],
list2:[
{title:'This is No.1'},
{title:'This is No.2'},
{title:'This is No.3'},
],
list3:[
{
title:'汽车',
typelist:[
{name:'大众',price:'12W'},
{name:'宝马',price:'56W'},
{name:'宝骏',price:'6W'},
]
},
{
title:'旅游',
typelist:[
{name:'西藏',price:'2K'},
{name:'新疆',price:'6K'},
{name:'北京',price:'4K'},
]
},
]
}
}
}
</script>

<style>

app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

image.png