微信小程序 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
    }
}

相关文章
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
小程序 前端开发 JavaScript
小程序中wx:if 和hidden的区别
在微信小程序中,wx:if和hidden都是用于控制元素显示与隐藏的方法,但它们在工作原理和性能上存在显著差异。
323 3
wx:for 微信小程序双重for嵌套如何获取内层的迭代对象
本文介绍了微信小程序中`wx:for`循环嵌套的使用方法,特别是如何在外层循环中访问内层循环的迭代对象。通过在外层`wx:for`中使用默认的`item`进行迭代,并在内层`wx:for`中通过`wx:for-item`属性指定迭代对象的名称,从而实现了双重`for`嵌套并获取内层迭代对象的目的。
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
446 0
|
小程序 JavaScript 索引
【微信开发】微信小程序多层wx:for嵌套的使用
【微信开发】微信小程序多层wx:for嵌套的使用
|
小程序 JavaScript 索引
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
548 12
|
9月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
358 0
|
11月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
226 0
在线课堂+工具组件小程序uniapp移动端源码

热门文章

最新文章