微信小程序 教程之条件渲染


Posted in Javascript onOctober 18, 2016

系列文章:

wx:if

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

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

注意: <block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

wx:if vs hidden

因为wx:if之中的模板也可能包含数据绑定,所有当wx:if的条件值切换时,MINA有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时wx:if也是惰性的,如果在初始渲染条件为false,MINA什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

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

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

Javascript 相关文章推荐
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
js charAt的使用示例
Feb 18 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
详谈javascript中的cookie
Jun 03 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
Node.js安装配置图文教程
May 10 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
微信小程序 教程之数据绑定
Oct 18 #Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 #Javascript
微信小程序 教程之WXML
Oct 18 #Javascript
原生JS实现匀速图片轮播动画
Oct 18 #Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 #Javascript
原生js实现网易轮播图效果
Apr 10 #Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 #Javascript
You might like
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
javascript实现依次输入input自动定焦
2014/12/23 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
常用的js方法合集
2017/03/10 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
python 迭代器和iter()函数详解及实例
2017/03/21 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Opencv求取连通区域重心实例
2020/06/04 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
森林防火工作方案
2014/02/14 职场文书
普通党员对照检查材料
2014/08/28 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
初中教师个人总结
2015/02/10 职场文书
大学生十八大感想
2015/08/11 职场文书