微信小程序 条件渲染详解


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 相关文章推荐
javascript preload&amp;lazy load
May 13 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
手机浏览器 后退按钮强制刷新页面方法总结
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
php预定义常量
2006/12/25 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
详解JS面向对象编程
2016/01/24 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
django表单的Widgets使用详解
2019/07/22 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
全球虚拟主机商:HostGator
2017/02/06 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
应届毕业生通用的自荐书范文
2014/02/07 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
北京英文导游词
2015/02/12 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
新人入职感言
2015/07/31 职场文书
教师旷工检讨书
2015/08/15 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
餐厅开业活动方案
2019/07/08 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书