component

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。详见

平台差异说明

App	HarmonyOS Next	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√ (Vue2 需传入 String 类型)	HBuilderX 4.24	√	x	x	x	x	x	x	x	x	x

template

uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用来进行 条件渲染 和 列表渲染。

<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

<block/> 在不同的平台表现存在一定差异，推荐统一使用 <template/>。

平台差异说明

App	HarmonyOS Next	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√	HBuilderX 4.24	√	√	√	√	√	√	√	√	√	√

代码示例

<template>
    <view>
        <template v-if="test">
            <view>test 为 true 时显示</view>
        </template>
        <template v-else>
            <view>test 为 false 时显示</view>
        </template>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				test:true
            }
        }
    }
</script>

<template>
    <view>
        <block v-for="(item,index) in list" :key="index">
            <view>{{item}} - {{index}}</view>
        </block>
    </view>
</template>

transition

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。详见

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
x	√	x	x	x	x	x	x	x	x	x

transition-group

<transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span>，可以通过 tag attribute 配置哪个元素应该被渲染。详见

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
x	√	x	x	x	x	x	x	x	x	x

keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。详见

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
x	√	x	x	x	x	x	x	x	x	x

slot

<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。插槽。

详细用法，请参考下面教程的链接。通过插槽分发内容

平台差异说明

App	HarmonyOS Next	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√	HBuilderX 4.24	√	√	√	√	√	√	√	√	√	√