vue的循环遍历,指令v-for

本文详细介绍了Vue.js中的v-for指令,包括如何使用v-for遍历数组和对象,以及在使用v-for时添加key的重要性。
摘要由CSDN通过智能技术生成

1.循环遍历

1.循环遍历:
    vue的循环遍历用v-for,语法类似于js中的for循环
    当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。

2.v-for使用格式:
   格式为:v-for = item in items
          (遍历items中的数据)

2.v-for遍历数组

1.v-for遍历数组
     用v-for指令基于一个数组来渲染一个列表。
     v-for 指令使用item in items形式的语法,
     其中items是源数据数组, 而item则是被迭代的数组元素。

* 如果v-for遍历数组中的数组值
   语法格式:v-for="movie in movies"
   依次从movies中取出movie,并且在元素的内容中,我们可以使用Mustache语法,来使用movie
     <li v-for="movie in movies"> {
  {movie}} </li>

* 如果v-for遍历数组中的数组值、索引值
     语法格式:v-for=(item, index) in items
      v-for中使用二个参数,即当前项和当前项的索引
      <li v-for="(item, index) in items">{
  {index}}. {
  {item}}</li>
<div id="app">
  <ul>
    <li v-for="name in names">{
   {
   name}}</li>
  </ul>
   //v-for遍历过程中,遍历数组中值,并显示

  <ul>
    <li v-for="(name,index) in names">{
   {
   index}}. {
   {
   name}}</li>
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值