微信小程序 条件渲染详解


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 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
js严格模式总结(分享)
Aug 22 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
手机浏览器 后退按钮强制刷新页面方法总结
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中使用Oracle数据库(3)
2006/10/09 PHP
PHP面向对象法则
2012/02/23 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python实现简单神经网络算法
2018/03/10 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
优秀信贷员先进事迹
2014/01/31 职场文书
广告宣传策划方案
2014/05/21 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL
python读取mat文件生成h5文件的实现
2022/07/15 Python