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>
