Vue2.x之循环模板指令

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

   <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">
　　　　　　{{index}}----{{item}}
　　　　 </li>

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

 

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

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

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

 

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

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

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