v-for遍历数组和对象
1、v-for遍历数组
在遍历过程中:
- 输出下标值;
- 不输出下标值。
<body>
<div id="app">
<ul>
<!--1.在遍历过程中,没有使用下标值(索引值)-->
<li v-for="item in names">{{item}}</li>
</ul>
<ul>
<!--2.在遍历过程中,使用下标值(索引值)-->
<li v-for="(item,index) in names">
{{index+1}}.{{item}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好呀',
names:['why','kebo','James','Messi']
}
})
</script>
</body>
2、v-for遍历对象
- 只获取值
- 获取key和value
- 获取key,value和inex
<body>
<div id="app">
<ul>
<!--1.在遍历对象的过程中,如果只是获取一个值,怎么获取到value-->
<li v-for="item in info">{{item}}</li>
</ul>
<ul>
<!--2.获取key和value格式-->
<li v-for="(value,key) in info">{{value}}---{{key}}</li>
</ul>
<ul>
<!--3.获取key和value和index格式-->
<li v-for="(value,key,index) in info">{{value}}---{{key}}----{{index}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好呀',
info:{
name:'why',
age:18,
height:1.88
}
}
})
</script>
</body>