时间：2023-04-25 20:11:43 点击次数：11
在各大前端框架、小程序中，此类标签的作用主要是用来帮助我们包裹多个元素。在浏览器实际渲染中会将其移除只渲染其包裹的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中，大家只需要把 <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中我们一般会使用<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 值。
