微信小程序 wx:if wx:elif wx:else 多条件判断

简介: 微信小程序 wx:if wx:elif wx:else 多条件判断

wxml

<view class="successlist">
<span>来访理由</span>
<span wx:if="{{list.visitCause==0}}"> 面试</span>
<span wx:elif="{{list.visitCause==1}}"> 开会</span>
<span wx:elif="{{list.visitCause==2}}"> 拜访顾客</span>
<span wx:elif="{{list.visitCause==3}}"> 项目实施</span>
<view wx:else> 其他 </view>
</view>

js

Page({
    data: {
        list: [],
    },
    onLoad: function(options) {
        wx.request({
            url: "http://ixxxe.com/test.json",
            data: {
            },
            method: 'GET',
            header: {
                'content-type': 'application/json'
            },
            success: res => {
                this.setData({
                    //第一个data为固定用法,第二个data是json中的data
                    list: res.data.data
                })
            }
        })
    },
})

json

{
    "msg": "查询成功",
    "code": 1,
    "data": {       
        "visitCause": 0
    }
}

显示:

json

{
    "msg": "查询成功",
    "code": 1,
    "data": {       
        "visitCause": 1
    }
}

显示:

json

{
    "msg": "查询成功",
    "code": 1,
    "data": {       
        "visitCause": 2
    }
}

显示:

json

{
    "msg": "查询成功",
    "code": 1,
    "data": {       
        "visitCause": 3
    }
}

json

{
    "msg": "查询成功",
    "code": 1,
    "data": {       
        "visitCause": 4
    }
}

相关文章
|
5天前
|
小程序 JavaScript 前端开发
小程序wx:if 和hidden的区别?
小程序wx:if 和hidden的区别?
|
5天前
|
小程序
小程序wx:if和hidden的区别?
小程序wx:if和hidden的区别?
|
5天前
|
小程序 容器
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
|
5天前
|
小程序 JavaScript 索引
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
|
5天前
|
小程序
微信小程序 wx:if使用
微信小程序 wx:if使用
81 0
|
7月前
|
小程序
微信小程序wx:else无效问题
微信小程序wx:else无效问题
142 0
|
5天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
5天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
5天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
5天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。

热门文章

最新文章