标签：WXML 渲染 微信 程序开发 else 使用 hidden 隐藏 wx

条件渲染

1. wx:if

在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{ condition }}"> True </view>

也可以用 wx:elif 和 wx:else 来添加 else 判断：

<view wx:if="{{ type ===1 }}"> 男 </view>
<view wx:elif="{{ type ===2 }}"> 女 </view>
<view wx:else> 保密 </view>

2. 结合 使用 wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个 标签将多个组件包装起来，并在 标签上使用 wx:if 控制属性，示例如下：

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

注意： 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

3. hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏：

<view hidden="{{ condition }}"> 条件为true隐藏，条件为false显示 </view>

4. wx:if 与 hidden 的对比

① 运行方式不同
⚫ wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
⚫ hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏
② 使用建议
⚫ 频繁切换时，建议使用 hidden
⚫ 控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

标签：WXML,渲染,微信,程序开发,else,使用,hidden,隐藏,wx
来源： https://www.cnblogs.com/qingheshiguang/p/16576020.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。