1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序 - WXML 模板语法 - 条件渲染

微信小程序 - WXML 模板语法 - 条件渲染

时间:2021-10-27 07:33:46

相关推荐

微信小程序 - WXML 模板语法 - 条件渲染

1、wx:if

(1)在微信小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块:

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

(2)在微信小程序中,还可以用wx:elifwx:else来添加else判断,示例代码如下:

<view wx:if="{{type == 0}}"> 大 </view><view wx:elif="{{type == 1}}"> 中 </view><view wx:else> 小 </view>

2、结合 使用 wx:if

(1)如果要一次性控制多个组件的展示与隐藏,可以使用一个<block></block>标签将多个组件包装起来,并在 标签上使用wx:if控制属性,示例代码如下:

<block wx:if="{{condition}}"><view> luca </view><view> hello </view></block>

(2)注意<block> 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。

3、hidden

(1)在微信小程序中,可以直接使用hidden="{{ condition }}"也能控制元素的显示与隐藏,示例代码如下:

<view hidden="{{condition}}"> luca </view>

4、wx:if 与 hidden 的对比

(1)运行方式不同

wx:if以动态创建和移除元素的方式,控制元素的展示与隐藏。②hidden以切换样式的方式(display: none/block;),控制元素的显示与隐藏。

(2)使用建议

频繁切换时,建议使用hidden。②控制条件复杂时,建议使用wx:if 搭配 wx:elif、wx:else进行展示与隐藏的切换。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。