vue2 v-for用法

<template>
  <div>
    <h2>人员列表(数组)</h2>
<!--   遍历数组:-->
<!--    写法1-->
    <div v-for="(item,index) in person " :key=index>{{item.name}}-{{index}}</div>
<!--    写法2-->
    <div v-for="(item) in person " :key=item.id>{{item.name}}-{{item.id}}</div>
    <h2>汽车信息(对象)</h2>
<!--    对象遍历-->
    <div v-for="(value,k) in car" :key="k">{{k}}---{{value}}</div>
    <h2>字符串遍历</h2>
    <div v-for="(v,k) in str" :key="k">{{v}} --- {{k}}</div>
    <h2>数字次数遍历</h2>
    <div v-for="(v,k) in 5" :key="k">{{v}} --- {{k}}</div>
  </div>
</template>

<script>
export default {
  name: "myTest19.vue",
  data(){
    return{
      //person数组:
      person:[
        {
          id:"001",
          name:'张三',
          skill:"poppin"
        },
        {
          id:"002",
          name:'李四',
          skill:"coding"
        },
        {
          id:"003",
          name:'王五',
          skill:"coding"
        }
      ],
      //对象
      car:{
        name:"奥迪",
        price:"70万",
        color:"黑色",
      },
      //字符串
      str : "school"
    }
  }
}
</script>

<style scoped>

</style>

在这里插入图片描述

  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值