Vue2.x之循环模板指令

V-for指令用于遍历数组，对象很方便。在两者遍历时，我们都使用了:key指令，这是在标识区别每一项，避免Vue渲染错误。

?

1 2 3 4 5 6 7 8

<div id="app">      <!-- v-for遍历数组 -->      <li v-for="item,index in colors" :key="index">{{item}}</li>      <li v-for="(item, index) in colors" :key="index"><br>　　　　　　{{index}}----{{item}}<br>　　　　 </li>        <!-- v-for遍历对象 -->      <li v-for="(item, index) in obj" :key="index">{{index}}---{{item}}</li>  </div>

 

但在实际使用中遇到情况更多是需要多元素配合的。

假如我们想连续使用多个li标签和hr标签，可采用以下语法(v-for标签绑定的元素中的内容会被遍历多次)。但是这样使用会多出一个冗余标签div，

?

1 2 3 4

<div v-for="(item, index) in colors" :key="index">   <li>{{item}}--{{index}}</li>   <hr> </div>

 

这种情况可使用VUE提供的template模板，template是模板占位符，可以用于包裹元素，但在循环渲染过程不会渲染到页面中。

注意的是，template是一个模板占位符，不允许绑定:key。可绑定在内部元素li上

?

1 2 3 4

<template v-for="(item, index) in colors">     <li @click="fun(index)">{{item}}--{{index}}</li>     <hr> </template>