微信小程序 条件渲染详解


Posted in Javascript onOctober 09, 2016

1,wx.if

在微信小程序中,小程序是使用wx.if="{{条件}}"来判断是否渲染该代码块,用法如下:

<view wx.if="{{条件}}">True</view>

也可以用wx.elif和wx.else来添加一个else块,事例如下:

<view wx:if="{{a>1}}"> 1 </view>
<view wx:elif="{{a>2}}"> 2 </view>
<view wx:else> 3 </view>

2,block wx:if

wx:if是一个控制属性,需要将它添加到标签上,但是如果我们想要一次性判断多个标签,我用可以使用<block/>将多个组件包装起来,并在上边使用wx:if控制属性,

其中并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。事例如下:

<block wx:if="{{TURE}}">
<view>view1</view>
<view>view2</view>
</block>

注:一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
js中创建对象的几种方式
Feb 05 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 #Javascript
最实用的jQuery分页插件
Oct 09 #Javascript
js本地图片预览实现代码
Oct 09 #Javascript
js html css实现复选框全选与反选
Oct 09 #Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 #Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 #Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 #Javascript
You might like
Yii2单元测试用法示例
2016/11/12 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python3+Appium安装使用教程
2019/07/05 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
招聘与培训专员岗位职责
2014/01/30 职场文书
亮化工程实施方案
2014/03/17 职场文书
房产委托公证书样本
2014/04/04 职场文书
公共场所禁烟标语
2014/06/25 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
2014年个人售房协议书
2014/10/30 职场文书
教师党员承诺书2015
2015/01/21 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python