【vue】 v-for使用整理

原创已于 2023-08-29 14:05:26 修改 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2019-11-19 15:38:04 首次发布

v-for

普通数字

data:{
      
}

<p v-for="count in 4">第{{count}}个</p>

普通数组

data:{
      list:[1,2,3,4]
}

<p v-for="(value,index) in list">--索引--{{index}}   --值--{{value}}</p>

普通对象

data:{
      obj:{
        a:1,
        b:2,
        c:3
      }
}

<p v-for="(val,key) in obj">--键是--{{key}}--值是--{{val}}</p>

对象数组

data:{
      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'},
      ]
}

<p v-for="(item,index) in listObj">--id--{{item.id}}   --姓名--{{item.name}}</p>