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>