vue v-for的特殊使用方式遍历对象

    今天看到一篇vue的v-for的高级应用，在此分享一下。

    先上代码。

<li v-for="item in array" :key="item"></li>

function(item){
    //这是v-for即将被vue执行的方法，用于渲染li
}

    item是作为参数被传入方法中，我们可以在这个item参数上加点料。比如：

//template部分
<ul>
<li v-for="{c=1,d=2} in array" :key="'l_'+d">
    {{ c }}|{{ d }}
</li>
</ul>

//data部分
array:[{c:"c1",d:"d1"},{c:"c2",d:"d2"},{d:"d3"}]

    效果图

    可以直接把参数变成数组对象解构并设置默认参数，在数据中，第三个数据是没有c属性的。

    v-for的处理还可以获取index，这个是大部分人都会用的。

//template部分
<ul>
<li v-for="(item,index) in array" :key="'l_'+item.d">
    {{ index }}|{{ item }}
</li>
</ul>

//data部分
array:[{c:"c1",d:"d1"},{c:"c2",d:"d2"},{c:"c3"d:"d3"}]

    v-for不仅可以处理数组，还可以处理对象。

//template部分
<ul>
<li v-for="(key,value,index) in obj_test" :key="'l_'+key">
    {{ index }}|{{ key }}|{{ value }}
</li>
</ul>

//data部分
obj_test:{c:"c1",d:"d1"}