小程序文档整理之 -- 条件渲染
来源:互联网 发布:java技术支持岗位职责 编辑:程序博客网 时间:2024/05/17 23:17
条件渲染
wx:if
在框架中,我们用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>也可以用 wx:elif 和 wx:else 来添加一个 else 块:<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>
block wx:if
因为 wx:if 是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view></block>
注意: block 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
wx:if vs hidden
wx:if在条件为真的时候进行局部渲染,在切换的时候会对数据销毁或重新渲染,而hidden一开始就会被渲染,只是显示或隐藏
一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
阅读全文
0 0
- 小程序文档整理之 -- 条件渲染
- 小程序文档整理之 -- 列表渲染
- 小程序WXML之条件渲染
- 小程序 条件渲染
- 小程序文档整理之 -- 场景值
- 小程序文档整理之 -- 数据绑定
- 小程序文档整理之 -- 模板
- 小程序文档整理之 -- 事件
- 小程序文档整理之 -- 组件
- 小程序文档整理之-- ajax请求
- 小程序文档整理之 -- 快速上手
- 小程序文档整理之 -- 引用(import和include)
- 小程序文档整理之 -- API(网络请求)
- 小程序文档整理之 -- API(媒体)
- 小程序文档整理之 -- API(文件)
- 小程序文档整理之 -- API(数据缓存)
- 小程序文档整理之 -- API(位置)
- 小程序文档整理之 -- API(设备)
- Pull解析实例
- 查找练习 hash——出现过的数字
- 1.在UBUNTU下搭建OPTEE环境
- 深度学习优化函数详解
- java 23种设计模式 深入理解
- 小程序文档整理之 -- 条件渲染
- angular-route基本使用Demo
- UVA 572 油田(BFS)
- Maven+Spring+Spring MVC+MyBatis+MySQL,搭建SSM框架环境
- CURL模拟post,get提交数据-实际应用
- 上传图片显示,ajaxUpload
- 删除数字-LintCode
- PHPStorm 配置自定义的Apache与PHP解释器
- Python中有关文件的操作