vue里的templete

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>