v-for

1.迭代普通数组

  • 在data中定义普通数组
data:{



      list:[1,2,3,4,5,6]



}
  • 在html中使用 v-for 指令渲染
<p v-for="(item,i) in list">--索引值--{{i}}   --每一项--{{item}}</p>

2.迭代对象数组

  • 在data中定义对象数组
data:{



      list:[1,2,3,4,5,6],



      listObj:[



        {id:1, name:'zs1'},



        {id:2, name:'zs2'},



        {id:3, name:'zs3'},



        {id:4, name:'zs4'},



        {id:5, name:'zs5'},



        {id:6, name:'zs6'},



      ]



}
  • 在html中使用 v-for 指令渲染
<p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

3.迭代对象

  • 在data中定义对象
data:{



      user:{



        id:1,



        name:'托尼.贾',



        gender:'男'



      }



}
  • 在html中使用 v-for 指令渲染
<p v-for="(val,key,index) in user">--键是--{{key}}--值是--{{val}}</p>

4.迭代数字

<!-- 注意:如果使用v-for迭代数字的话,前面 count 的值从 1 开始-->



<p v-for="count in 10">这是第{{count}}次循环</p>

完整代码:

© 2021 hanbaoaaa record.浙ICP备20005263号
asdad
联系方式 asdasd
2021-5-8 4:19
sss
回复数 (0) 点击展开
加载更多

新增评论

称呼
联系方式
邮箱(选填)
内容

提交

取消