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>