简单介绍一下前端各框架中的模板标签

113 阅读2分钟

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

在小程序中使用

小程序中的模板标签是< 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>

条件渲染

如果要一次性判断多个组件标签,可以使用 将多个组件包装起来,并使用 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中,大家只需要把 替换成