uni - 條件渲染

vue官方文檔和uni官方同步：https://cn.vuejs.org/v2/guide/conditional.html

 

 

1.多次切換建議使用v-show(始終保存在BOM)

2.因為if是惰性判斷(多次判斷與加載與銷毀比較浪費資源)

 

<template>
    <view class="content f f-wrap">
        <!-- if -->
        <view class="if">
            <view v-if="title=='A'">A</view>
        </view>

        <!-- if else -->
        <view class="if">
            <view v-if="title=='A'">A</view>
            <view v-else>B</view>
        </view>

        <!-- if else if -->
        <view class="if">
            <view v-if="title=='A'">A</view>
            <view v-else-if="title='Hello'">Hello</view>
        </view>

        <!-- 模板使用 -->
        <template v-if="title='Hello'">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {
            console.log('頁面加載')
        },
        onShow() {
            console.log('頁面顯示')
        },
        onReady() {
            console.log('頁面初次顯示')
        },
        onHide() {
            console.log('頁面隱藏')
        },
        onUnload() {
            console.log('頁面卸載')
        },
        onBackPress() {
            console.log('頁面返回...')
        },
        onShareAppMessage() {
            console.log('分享!')
        },
        onReachBottom() {
            console.log('下拉加載...')
        },
        onPageScroll() {
            console.log('頁面滾動...')
        },
        onPullDownRefresh() {
            console.log('上拉刷新...')
            uni.stopPullDownRefresh();
        },

        // #ifdef APP-PLUS
        onNavigationBarButtonTap() {

        },
        // #endif

        methods: {
            tap(e) {
                console.log('tap點擊!', e);
            }
        }
    }
</script>

<style lang="scss">
    .f {
        display: flex;
    }

    .f-wrap {
        flex-wrap: wrap;
    }
</style>