微信小程序 条件渲染详解


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动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
JS数组及对象遍历方法代码汇总
Jun 16 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
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
javascript 隔行换色函数代码
2010/10/24 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Django中的ajax请求
2018/10/19 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python读文件的步骤
2019/10/08 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
前台文员岗位职责
2013/12/28 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
优秀教师个人总结
2015/02/11 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
python APScheduler执行定时任务介绍
2022/04/19 Python
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers