在各大前端框架、小程序中，此类标签的作用主要是用来帮助我们包裹多个元素。在浏览器实际渲染中会将其移除只渲染其包裹的DOM元素，所以说不会增加额外的DOM节点

在小程序中使用

小程序中的模板标签是< block></ block>，下面是对其用法的一些简单介绍：

• <block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性(wx:if ,wx:for之类的，不接受class)。
• 在小程序中，我们主要使用该标签进行列表渲染(wx:for)或条件渲染(wx:if)

列表渲染

block wx:for 渲染一个包含多节点的结构块

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

条件渲染

如果要一次性判断多个组件标签，可以使用<block/> 将多个组件包装起来，并使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

案例

使用swiper组件，图片滑动切换中使用block

<swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

PS：现在非常热门的uni-app，它的模板标签同样是 < block></ block>。

在Vue中使用

其实在Vue中，大家只需要把 <block/>替换成 <template/>即可。

案例

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

需要注意的只有控制属性(v-for和v-if)的优先级问题。

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

上面的代码将只渲染未完成的 todo。

在React中使用

在React中我们一般会使用<Fragment/>来包裹其它标签。

import {Fragment} from 'react'
...
<Fragment>
	<p>test</p>
	<p>test</p>
</Fragment>
...

<Fragment/>仅能接收 key 属性，当存在循环遍历时，使用<Fragment/>可以指定唯一的 key 值(key 是唯一可以传递给<Fragment/>的属性， 如果你需要给你的包裹标签绑定事件，那么不可以用<Fragment/>来作为包裹标签)

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`，将会触发一个key警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

第二种模板标签

在React中除了使用<Fragment/>来作为模板标签之外，还可以使用空标签(<></>)。在 React 中， <></> 是 <React.Fragment/> 的语法糖。

...
<>
	<p>test</p>
	<p>test</p>
</>
...

但是二者之间还是有区别的，空标签无法接收任何属性，<Fragment/>仅能接收 key 属性，当存在循环遍历时，只能通过使用 <Fragment/>来指定唯一的 key 值。