微信小程序 条件渲染详解
更新时间：2016年10月09日 09:37:11 作者：码农伯伯0丶1
这篇文章主要介绍了微信小程序 条件渲染详解的相关资料,需要的朋友可以参考下
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较好。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
Server-sent events实时获取服务端数据技术详解
这篇文章主要为大家介绍了Server-sent events实时获取服务端数据技术详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了微信小程序 选择器（时间，日期，地区）实例详解的相关资料,这里提供了实例代码及实现效果图，帮助大家学习理解这部分知识，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了微信小程序 数据绑定的相关资料,并附实例代码，需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了uniapp封装canvas组件和方法无脑绘制并保存小程序分享海报实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了JS前端面试手写apply和bind实例的轻松实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍5种 JavaScript 方式实现数组扁平化，虽说只有5种方法，但是核心只有一个就是遍历数组arr，若arr[i]为数组则递归遍历，直至arr[i]不为数组然后与之前的结果concat。 想具体了解的小伙伴那请看下面文章内容吧2021-09-09
这篇文章主要介绍了 微信小程序 保留小数(toFixed)详细介绍的相关资料,这里附有实例，帮助大家学习参考此部分知识，需要的朋友可以参考下2016-11-11
详解Anyscript开发指南绕过typescript类型检查
这篇文章主要为大家介绍了详解Anyscript开发指南绕过typescript类型检查，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了Java开发 富文本编辑器TinyMCE详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要为大家介绍了ECharts图表使用及异步加载的特性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论