<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="vue-app08">
<h1>v-for循环</h1>
<!-- 数组下标 -->
<!-- {{characters[0]}}
{{characters[1]}}
{{characters[2]}} -->
<!-- 数组遍历 -->
<ul>
<li v-for="x in characters">
{{x}}
</li>
</ul>
<ul>
<li v-for="y in users">
{{y.name}}-{{y.age}}
</li>
</ul>
<ul>
<!-- index索引 -->
<li v-for="(y,index) in users">
{{index}}. {{y.name}}-{{y.age}}
</li>
</ul>
<div v-for="(y,index) in users">
<h3>{{index}}.{{y.name}}</h3>
<p>Age - {{y.age}}</p>
</div>
<template v-for="(y,index) in users">
<h3>{{index}}.{{y.name}}</h3>
<p>Age - {{y.age}}</p>
</template>
<template v-for="(y,index) in users">
<div v-for="(val,key) in y">
<p>{{key}} - {{val}}</p>
</div>
</template>
</div>
<script src="v-for.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
new Vue({
el:"#vue-app08",
data:{
//两个数组
characters:["小红","小敏","小里"],
users:[
{name:"Henry",age:30},
{name:"lily",age:20},
{name:"locy",age:10},
]
},
methods:{
},
computed:{
}
})