博客

1、做v-for列表循环时：

首先是div

<div class="index">
    <div v-for="item in list"> //这里使用的是 div
      <div>{{ item.id }}</div>
      <div>{{ item.name }}</div>
      <div>{{ item.music }}</div>
    </div>
  </div>

可以看到列表外面这层div也被渲染出来

我们再看template：

 <div class="index">
    <template v-for="item in list"> //这里使用的template
      <div>{{ item.id }}</div>
      <div>{{ item.name }}</div>
      <div>{{ item.music }}</div>
    </template>
  </div>

可以看到template并没有被渲染，相较于使用div 会节省一个没必要的div标签的空间

template是作为占位符模板，用于包裹元素，自身并没有被渲染出来。

2、v-show控制元素显示隐藏时

我们都知道 v-show隐藏元素的原理是 控制其元素的display:none

同样还是这个例子，首先是 div

<div class="index">
    <div v-for="item in list" v-show="false"> //设置 v-show 控制列表隐藏
      <div>{{ item.id }}</div>
      <div>{{ item.name }}</div>
      <div>{{ item.music }}</div>
    </div>
  </div>

其结果为隐藏成功，外部包裹列表的div的 display：none

我们再看template：

 <div class="index">
    <template v-for="item in list" v-show="false">
      <div>{{ item.id }}</div>
      <div>{{ item.name }}</div>
      <div>{{ item.music }}</div>
    </template>
  </div>

其结果 列表并没有被隐藏，可以理解为 template并没有被作为 dom元素被渲染出来， 所有无法控制其 display：none （换成v-if 任然能控制隐藏）