Day03-vue基础

Day03-vue基础

一 列表渲染

v-for这个指令可以实现列表渲染

1 数组

    <ul><!-- v-for遍历的时候,key必须赋唯一值第一个参数是数组元素,第二个参数是元素下标--><li v-for="(item,index) in [1,3,5,7]" :key="item">{{item}}--{{index}}</li></ul>

2 数字

    <ul><li v-for="item in 10" :key="item">{{item}}</li></ul>

3 对象

  data(){return{arr:[{id:1,name:"赵日天"},{id:2,name:"李杀神"},{id:3,name:"王诛魔"},{id:4,name:"刘斩仙"},]}},<ul><li v-for="item in arr" :key="item.id">{{item.name}}</li></ul&