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

在小程序中使用

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

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

列表渲染

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

   {{index}}: 
   {{item}} 

条件渲染

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

   view1 
   view2 

案例

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

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

在Vue中使用

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

案例

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

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

  {{ todo }}

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

在React中使用

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

import {Fragment} from 'react'
...

	
test
	
test

...

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

function Glossary(props) {
  return (
    

      {props.items.map(item => (
        // 没有`key`，将会触发一个key警告
        
          
{item.term}
          
{item.description}
        
      ))}
    
  );
}

第二种模板标签

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

...
<>
	
test
	
test

...

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