uni - 条件渲染

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

1.多次切换建议使用v-show(始终保存在BOM)

2.因为if是惰性判断(多次判断与加载与销毁比较浪费资源)

 1 <template>
 2     <view class="content f f-wrap">
 3         <!-- if -->
 4         <view class="if">
 5             <view v-if="title=='A'">A</view>
 6         </view>
 7 
 8         <!-- if else -->
 9         <view class="if">
10             <view v-if="title=='A'">A</view>
11             <view v-else>B</view>
12         </view>
13 
14         <!-- if else if -->
15         <view class="if">
16             <view v-if="title=='A'">A</view>
17             <view v-else-if="title='Hello'">Hello</view>
18         </view>
19 
20         <!-- 模板使用 -->
21         <template v-if="title='Hello'">
22             <h1>Title</h1>
23             <p>Paragraph 1</p>
24             <p>Paragraph 2</p>
25         </template>
26 
27     </view>
28 </template>
29 
30 <script>
31     export default {
32         data() {
33             return {
34                 title: 'Hello'
35             }
36         },
37         onLoad() {
38             console.log('页面加载')
39         },
40         onShow() {
41             console.log('页面显示')
42         },
43         onReady() {
44             console.log('页面初次显示')
45         },
46         onHide() {
47             console.log('页面隐藏')
48         },
49         onUnload() {
50             console.log('页面卸载')
51         },
52         onBackPress() {
53             console.log('页面返回...')
54         },
55         onShareAppMessage() {
56             console.log('分享!')
57         },
58         onReachBottom() {
59             console.log('下拉加载...')
60         },
61         onPageScroll() {
62             console.log('页面滚动...')
63         },
64         onPullDownRefresh() {
65             console.log('上拉刷新...')
66             uni.stopPullDownRefresh();
67         },
68 
69         // #ifdef APP-PLUS
70         onNavigationBarButtonTap() {
71 
72         },
73         // #endif
74 
75         methods: {
76             tap(e) {
77                 console.log('tap点击!', e);
78             }
79         }
80     }
81 </script>
82 
83 <style lang="scss">
84     .f {
85         display: flex;
86     }
87 
88     .f-wrap {
89         flex-wrap: wrap;
90     }
91 </style>

uni - 条件渲染

推荐阅读