1.遍历数组不显示index（下标）
<div id="app">
<ul>
<li v-for="item in colors">{{item}}</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
colors: ['red','yellow','blue','green']
}
})
</script>
image.png
2.遍历数组并显示index(下标)
<div id="app">
<ul>
<li v-for="(item,index) in colors">
{{index+1}}.{{item}}
</li>
</ul>
</div>
image.png
3.遍历对象显示value值
<div id="app">
<ul>
<li v-for="value in obj">{{value}}</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
obj: {
name: 'sunny',
age: 18,
sex: 'male'
}
}
})
</script>
只有一个变量时，该变量对应对象的value值
image.png
4.遍历对象显示key和value
<div id="app">
<ul>
<li v-for="(value,key) in obj">{{key}}:{{value}}</li>
</ul>
</div>
有两个变量时，第一个变量代表value值，第二个变量代表key
image.png
5.遍历对象显示key、value和index
<div id="app">
<ul>
<li v-for="(value,key,index) in obj">
{{index}}-{{key}}:{{value}}
</li>
</ul>
</div>
image.png
