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>