全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

wx:ifelse使用用法介绍

发布时间:2023-11-24 03:39:17
发布人:xqq

一、wx:ifelse的基本用法

wx:if可以控制一个元素是否需要渲染在页面中,用法如下:


 //condition是一个Boolean类型
    条件成立时渲染的内容

wx:if的等价于:



    
        条件成立时渲染的内容
    

wx:else是wx:if的兄弟元素,当wx:if的条件不成立时,wx:else的内容才会被渲染在页面中:



    条件成立时渲染的内容


    条件不成立时渲染的内容

wx:elif是个缩写,用来编写if...else if...else if...的逻辑:



    条件1成立时渲染的内容


    条件1不成立,条件2成立时渲染的内容


    条件1和条件2都不成立时渲染的内容

二、wx:ifelse的性能问题

wx:if else的作用,就是提供了直接控制组件渲染的具体机制,可以理解为在运行期,根据表达式返回值判断是否渲染这个组件。

wx:if内的模板在刚开始渲染时,框架会先判断wx:if表达式返回值的真假,如果为真,框架就会准备对该模板进行渲染;如果为假,则忽略该模板。在条件判断变化时,框架会重新渲染或移除模板。而wx:else和wx:elif的实现,是通过相同机制实现的。

这就意味着,如果在模板中存在大量的wx:if和wx:else等条件渲染,且条件表达式变繁琐时,会影响到整个小程序的性能。

因此在使用wx:ifelif时,需要注意以下几点:

1、避免将wx:if的条件判断嵌套过深,一般不要超过 3 层

2、避免在wx:if中添加过多的逻辑判断,建议通过修改重设计来避免

3、wx:if与hidden的选择,wx:if控制是否被渲染,hidden则是控制css的display属性是否生效,后者更适合控制较小的元素的显隐状态

三、wx:ifelse的注意事项

wx:ifelse的注意事项如下:

1、不支持在一个节点上同时使用wx:if和hidden来控制显隐状态




2、不支持在template和block标签上使用wx:ifelse

3、当循环渲染多个节点时,每个节点的数据单独绑定wx:if效果更好

4、在使用template套用时,wx:if、wx:elif、wx:else只能用在template上,不能使用在引用这个template的组件上。

5、不建议将wx:if、wx:elif、wx:else用在较大的组件上,这样会影响性能,建议使用wx:key来进行组件循环渲染

四、wx:ifelse的应用示例

下面是一个有关wx:ifelse的简单应用示例,用于展示wx:ifelse的使用方法:



    条件1满足时显示的内容


    条件2满足时显示的内容


    默认情况下显示的内容

以上代码中,我们使用了wx:if、wx:elif和wx:else来对三个不同的条件进行判断。当第一个条件满足时,显示的内容为第一个view标签内的内容,同时该标签的样式为style1;当第一个条件不满足时,继续判断第二个条件,如果第二个条件成立,则显示第二个view标签内的内容,样式为style2;如果两个条件都不成立,则显示第三个view标签的内容,样式为style3。

通过这个示例,我们可以更好地理解wx:ifelse的基本使用方式,并在实际开发中灵活运用。

ios折线图

相关文章

C#字符串删除指定字符串的方法

C#字符串删除指定字符串的方法

2023-11-24
使用Postman实现并发请求

使用Postman实现并发请求

2023-11-24
linux上的虚机机,linux虚拟机

linux上的虚机机,linux虚拟机

2023-11-24
uniapp小程序分享功能详解

uniapp小程序分享功能详解

2023-11-24

最新文章

武汉新媒体行业公司排名

武汉新媒体行业公司排名

2023-11-01
武汉新媒体就业现状好吗

武汉新媒体就业现状好吗

2023-11-01
武汉全媒体行业发展现状及趋势

武汉全媒体行业发展现状及趋势

2023-10-31
武汉全媒体现状

武汉全媒体现状

2023-10-31
在线咨询 免费试学 教程领取