component

# component

Renders a "meta component" as a dynamic component. Depending on the value of is, determine which component is rendered. See details

Platform difference description

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
√ (Vue2 needs to pass String type)	√	x	x	x	x	x	x	x	x	x

# template

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

<template/> and <block/> are not a component but just a packaging element. They will not be rendered on the page and only accept control attributes.

<block/> has certain differences in performance on different platforms. It is recommended to use <template/> uniformly.

Platform difference description

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

Code example

<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

The <transition> element acts as a transition effect for a single element/component. <transition> will only apply transition effects to its wrapped content, without rendering additional DOM elements, and will not appear in the component hierarchy that can be inspected. See details

Platform difference description

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

# transition-group

The <transition-group> element acts as a transition effect for multiple elements/components. <transition-group> renders a real DOM element. Render <span> by default, you can configure which element should be rendered by tag attribute. See details

Platform difference description

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

# keep-alive

<keep-alive>, when wrapping dynamic components, caches inactive component instances instead of destroying them. Similar to <transition>, <keep-alive> is an abstract component: it does not render a DOM element itself, nor does it appear in the component's parent component chain. See details

Platform difference description