Vue2.x基本列表—v-for
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" />
< title> 基本列表</ title>
< script type = " text/javascript" src = " ../js/vue.js" > </ script>
</ head>
< body>
< div id = " root" >
< ul>
< li v-for = " (item,index) in persons" :key = " item.id" >
{{item.id}}-----{{item.name}}------{{item.age}}岁-----{{item.sex}}
</ li>
</ ul>
< div> 汽车信息</ div>
< ul>
< li v-for = " (value,key) in car" :key = " key" > {{value}}</ li>
</ ul>
< h2> 测试遍历字符串</ h2>
< ul>
< li v-for = " (data,index) in str" > {{data}}---{{index}}</ li>
</ ul>
</ div>
< script>
new Vue ( {
el : "#root" ,
data : {
persons : [
{ id : "001" , name : "老张" , age : 20 , sex : "男" } ,
{ id : "002" , name : "老刘" , age : 29 , sex : "女" } ,
{ id : "003" , name : "老马" , age : 32 , sex : "男" } ,
{ id : "004" , name : "老王" , age : 50 , sex : "女" } ,
] ,
car : {
name : "奔驰G63" ,
price : "60万" ,
color : "灰色" ,
} ,
str : "abcdef" ,
} ,
} ) ;
</ script>
</ body>
</ html>