本文主要是介绍学习微信小程序WXML之条件渲染,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
此贴为学习9 小时搞定微信小程序开发 的笔记
文档:条件渲染 · 小程序
这是一个解决今天吃什么这一大难题的一小段代码。
<!--index.wxml -->
<view>今天吃什么?</view>
<view wx:if="{{condition === 1}}">饺子
</view>
<view wx:elif="{{condition === 2}}">米饭
</view>
<view wx:else>面食
</view>
//index.js
Page({data:{condition: Math.floor(Math.random()*3+1)}
})
当页面传入的condition变量的值为1时,今天就吃饺子,当值为2时,今天就吃米饭;当为其他值时,今天就吃面食。js文件里就是condition变量生成一个1-3的随机整数。Math.random()
生成0-1的浮点随机数,Math.floor()
对浮点数处理来返回一个向下取整的整数。
渲染结果:
wx:if和hidden的区别
这两个都能控制元素的显示,但wx:if
的条件在切换时,框架会有一个局部渲染的过程,从而确保条件块在渲染时可以销毁,并进行重新渲染。而hidden
属性始终都会渲染,通过hidden
属性可以控制视图上的显示或隐藏。一般来说,wx:if
有更高的切换消耗,hidden
有更高的初始话渲染消耗。所以如果元素要频繁切换的话,用hidden
更好。
这篇关于学习微信小程序WXML之条件渲染的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!