VUE v-for 遍历数组/对象

v-for

1、v-for 遍历数组

<div><!-- v-for 遍历数组 --><ul><!-- 1、在遍历的过程中，没有使用下标值（索引值） --><!-- item 是数组中的每一项，names 是数组的名字 就是相当于 v-for="item in array" --><liv-for="item in names">{{item}}</li></ul><ul><!-- 2、在遍历过程中，获取索引值，index是数组的索引值，从0开始，这里 + 1 是为了看起来正常一点 --><liv-for="(item,index) in names">{{index + 1}}.{{item}}</li></ul></div>

2、 v-for 遍历对象

<divid="app"><!-- 遍历对象 --><ul><!-- 1、在遍历对象的过程中，如果只是获取一个值，那么获取到的是value 就是{key:value}的这个value --><liv-for="item in info">{{item}}</li></ul><ul><!-- 2、获取key 和value  格式：（value,key)	输出的是这样：luluwang-name --><liv-for="(value,key) in info">{{value}}-{{key}}</li></ul><ul><!-- 3、获取key 和value 和index  格式：（value,key，index)	输出：0-luluwang-name --><liv-for="(value,key,index) in info">{{index}}-{{value}}-{{key}}</li></ul></div><scripttype="text/javascript">const app=newVue({
            el:'#app',
            data:{
                info:{
                    name:'luluwang',
                    age:18,
                    height:165}}})</script>

3、给 v-for 加 key属性

使用v-for 的时候，给对应的元素或组件添加上一个:key 属性，为了更好地复用，但是要保证这个 key 的值是唯一的，不然没什么意义。