uni - 条件渲染
2024-08-31 07:50:33
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>
最新文章
- PuTTY配置
- jquery-leonaScroll-1.2-自定义滚动条插件
- Node.js入门：文件查找机制
- Java EE开发平台随手记3——Mybatis扩展2
- c++学习笔记——聚合类
- KM算法详解+模板
- 网页上PNG透明图片的ie6bug
- python路径相关
- win32下进程间通信——共享内存
- linux虚拟机centos64位_6.5+VM10安装oracle11g图文详解
- iOS 应用关于弥补安全优化问题
- JAVA之旅（三十二）——JAVA网络请求，IP地址,TCP/UDP通讯协议概述，Socket，UDP传输，多线程UDP聊天应用
- XMind 8 pro update 7激活方法
- python五十六课——正则表达式（常用函数之search()）
- 【Codeforces 332C】Students' Revenge
- 学习笔记之C / C++
- Hadoop集群配置（最全面总结 )(转)
- PAT 1061 判断题（15）（代码）
- [dubbo实战] dubbo+zookeeper伪集群搭建 （转）
- HTML5学习笔记（二）：HTML基础学习之一