问题来源

我有一个数组，存放了不同类型的内容，有些是普通的文字，另外一些则是示例代码，我希望在一个共同的标签内，用不同的子标签对他们进行渲染。

数据源是这样的：

message:[
  {
    content:'使用bootstrap，你需要使用html5的文档类型,像下面这样:'
  },
  {
    type:'code',
    content:'<!doctype html>'
  },
]

我希望他们最终渲染成这样：

<div>
  <p>使用bootstrap，你需要使用html5的文档类型,像下面这样:</p>
  <pre><!doctype html></pre>
</div>

熟悉的渲染方式是采用v-for，官方的示例是这样的：

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

这里v-for是加在了li标签上，很显然这样不能根据数据更换标签。

另外一种实现方式如下：

<div v-for="item in message">
  <pre v-if="item.type=='code'">{{item.content}}</pre>
  <p v-esle>{{item.content}}</p>
</div>

这种做法对每一项都会渲染一个div，其中包裹pre或者p标签，看起来效果和差不多，但是显然div是多余的，但是没有它我们的v-for指令没有添加的地方。联想到微信小程序有block标签，其实这里就是想要类似的一个标签。

解决

在查看vue教程的时候，发现了templae标签的一个用途，以此为例尝试在template上使用v-for指令：

<template v-for="item in message">
  <pre  v-if="item.type=='code'">
     {{item.content}}
  </pre>
  <p v-else>
    {{item.content}}
  </p>
</template>

以上代码实现了最初的效果，而且没有添加多余的包裹元素。

结论

在vue中，template标签可以当作包裹元素使用，在它之上可以应用条件渲染和列表渲染的指令，最终它不会被渲染到页面。