1 <template> 2 3 <!-- vue的模板里面 所有的内容要被一个根节点包含起来 --> 4 5 <div id="app"> 6 7 <h2>{{msg}}</h2> 8 9 <br> 10 这是一个根组件 11 12<br> 13 14<h3>{{obj.name}}</h3> 15 16<br> 17<hr> 18 19<br /> 20 21<ul> 22 <li v-for="item in list"> 23 {{item}} 24 </li> 25</ul> 26 27<br> 28<hr> 29 30<br /> 31 32<ul> 33 <li v-for="item in list1"> 34 {{item.title}} 35 </li> 36</ul> 37 38 39<br> 40 <hr> 41 42 <br /> 43 44 <ul> 45 <li v-for="item in list2"> 46 {{item.cate}} 47 48 <ol> 49<li v-for="news in item.list"> 50 {{news.title}} 51</li> 52 </ol> 53 54 </li> 55 </ul> 56 57 </div> 58 </template> 59 60 <script> 61export default {62 data () { /*业务逻辑里面定义的数据*/ 63 return { 64 msg: '你好vue', 65 obj:{ 66 name:"张三" 67 }, 68 list:['111','222','333'], 69 list1:[ 70 {'title':'11111'}, 71 {'title':'222'}, 72 {'title':'333333'}, 73 {'title':'44444'} 74 ], 75 list2:[ 76{ 77 "cate":"国内新闻", 78 "list":[ 79 80{'title':'国内新闻11111'}, 81{'title':'国内新闻2222'} 82 ] 83}, 84{ 85 "cate":"国际新闻", 86 "list":[ 87 88{'title':'国际新闻11111'}, 89{'title':'国际新闻2222'} 90 ] 91} 92 93 ] 94 95 } 96 } 97} 98 </script> 99 100 101 <style lang="scss">102 103 104 </style>
