vue里的templete
定义:包裹元素
当不需要父元素的时候,直接用templete包裹,因为templete不会渲染出来。
使用:
①和v-if用。
<!-- 用template包裹的 --> <template v-if="test"> <p>测试1</p> </template> <!-- 用div包裹的 --> <div v-if="test2"> <p>测试2</p> </div>
结果
templateme没有渲染出来。
②和 v-for用。
<template v-for="(item, index) in list">
<span :key="index">{{item.key}}</span>
</template>
结果
扩展:
不要在同一元素同时v-if和v-for,需要有条件的循环,把v-if放在外层。
例如
<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li>
-------------------------------------------------------
<ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul>
原文:https://www.cnblogs.com/xieZhao/p/13047800.html