前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序 wx:if wx:elif wx:else 多条件判断

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

作者头像
王小婷
发布于 2025-05-20 04:42:31
发布于 2025-05-20 04:42:31
6800
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "msg": "查询成功",
    "code": 1,
    "data": {       
        "visitCause": 0
    }
}

显示:

json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "msg": "查询成功",
    "code": 1,
    "data": {       
        "visitCause": 1
    }
}

显示:

json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "msg": "查询成功",
    "code": 1,
    "data": {       
        "visitCause": 2
    }
}

显示:

json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "msg": "查询成功",
    "code": 1,
    "data": {       
        "visitCause": 3
    }
}

json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "msg": "查询成功",
    "code": 1,
    "data": {       
        "visitCause": 4
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-07-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小程序根据返回值的int类型渲染不同的状态
需求:返回值里面有 0,1,2,3,4 分别代表面试,开会,拜访顾客,项目实施,其他这5中类型,需要将获取到的0,1,2,3,4渲染到页面上,分别显示所对应的类型状态面试,开会,拜访顾客,项目实施,其他。
王小婷
2021/06/22
2.1K0
小程序根据返回值的int类型渲染不同的状态
微信小程序根据返回值判断状态
json { "msg": "查询成功", "total": 25, "code": 1, "rows": [{ "id": 29, "subscribeTime": "2021-06-17 18:00:00", "name": "12", "sex": 1, "idNumber": "45", "phone": "34", "interviewee": "67",
王小婷
2021/06/29
1.3K0
小程序根据返回值是否为空判断标签是否显示
如果为空,则不显示奖励这两个字的标签 wxml <view class="cu-item" wx:for="{{allSignList}}" wx:key="index"> <view class="content"> <view wx:if="{{item.taskReward}}">奖励:{{item.taskReward}}</view> </view> </view> js Page({ data: { allSignList: [] }, onLoad: fun
王小婷
2020/12/28
3.1K0
小程序根据返回值是否为空判断标签是否显示
小程序返回的时间戳转化成时间
2:准备好json数据,并且将json数据放在服务器上,可以通过域名来访问数据,这样会方便一点,也可以直接把json数据放在本地引用。 json
王小婷
2020/10/23
1.6K0
微信小程序入门《二》实例:条件渲染、数据遍历、网络请求、获取本地图片
实例内容 条件渲染 数据遍历 网络请求 获取本地图片 实例一: 条件渲染 如果motto为Hello World,则输出你好世界,否则原样输出。 这里是分支条件判断,直接在视图文件里修改,修改inde
极乐君
2018/02/05
1.8K0
微信小程序入门《二》实例:条件渲染、数据遍历、网络请求、获取本地图片
微信小程序 开发笔记
参考:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
yiyun
2022/04/01
5370
微信小程序 开发笔记
全栈开发工程师微信小程序-下
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
达达前端
2019/07/03
7690
全栈开发工程师微信小程序-下
微信小程序wx.request接口
wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求
达达前端
2022/04/29
1.3K0
微信小程序wx.request接口
小程序数据渲染根据返回值计算百分比并且显示
wxml: <view >{{ precent + '%'}}</view> <text >{{welfare_list.welfareDO.haveForestCoin}}/{{welfare_list.welfareDO.forestCoin}}森林币</text> js Page({ data: { welfare_list: [], welfareDO: {}, }, onLoad() { this.getWelfareList() }, getWel
王小婷
2020/10/23
9700
微信小程序新闻信息列表展示
微信小程序信息展示列表 效果展示 wxml <!-- 轮播图 --> <view class='haibao' bindtap="seeDetail" id="{{item.activityCon
达达前端
2019/07/03
3.1K0
微信小程序新闻信息列表展示
小程序根据返回值英文渲染出对应的中文
需求:后端返回值为英文,在渲染的时候,将英文所对应的中文意识渲染到前端页面。然后每种不同的状态渲染完之后给到不同的颜色进行区分。
王小婷
2020/10/23
8640
小程序调用天气接口并且渲染在页面
五分钟上手-微信小程序组件库 iView Weapp https://www.jianshu.com/p/09b4515152ff
王小婷
2019/06/22
1.5K0
微信小程序提交form表单内容
wxml <form catchsubmit="confirmPublish"> <view class="cu-form-group margin-top"> <view class="title d-flex"> 姓名 </view> <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;"> <input maxleng
王小婷
2021/06/29
1.6K0
微信小程序 this.setData(微信小程序setstorage)
##Page.prototype.setData(Object data, Function callback) setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。 参数说明:
全栈程序员站长
2022/08/02
28.5K0
微信小程序 this.setData(微信小程序setstorage)
09-微信小程序API网络请求(实现轮播广告和简易的聊天窗口)
做项目的开发,一定离不开网络相关的操作,小程序做的都是客户端,客户端请求服务端做一些交互。
度假的小鱼
2023/11/27
3570
09-微信小程序API网络请求(实现轮播广告和简易的聊天窗口)
小程序调用新闻接口实现列表循环
今天我又来调接口了,调用天气接口,音乐接口,新闻接口,图片接口,调完之后瞬间又觉得自己心情美美哒了,哈哈哈。
王小婷
2019/07/03
1.9K0
小程序调用新闻接口实现列表循环
微信小程序picker选择器渲染json数据
json数据 { "msg": "查询成功", "code": 1, "data": [{ "id": 1413, "organName": "广西化工有限公司" }, { "id": 1414, "organName": "安全环保部" }, { "id": 1415, "organName": "综合管理部" }, { "id": 1416,
王小婷
2021/06/29
1.3K0
[小程序]微信小程序获取input并发送网络请求
1. 获取输入框数据 wxml中的input上增加bindinput属性,和方法值 在js部分定义与之对应的方法,只要在输入的时候,数据就会绑定调用到该方法,存入data属性变量中
唯一Chat
2019/09/10
1.1K0
[小程序]微信小程序获取input并发送网络请求
微信小程序跳转页面传多个参数(拼接)
//事件处理函数,带着4个参数跳转,姓名时间被访部门 bindViewTapsuccess: function() { wx.navigateTo({
王小婷
2021/07/13
3.6K0
打造新闻阅读微信小程序:从列表展示到实用功能一应俱全
微信小程序作为一个轻量级的应用平台,为用户提供了便捷的信息获取和服务体验。本文将以一个新闻阅读类的微信小程序为例,详细介绍如何实现新闻列表展示、图片加载、Tab滑动切换、获取数据、处理图片加载失败、数据缓存、分页加载、错误处理、下拉刷新、列表项点击跳转、用户授权、搜索功能、图片预览和小程序分享等功能。跟随本文的步骤,你将轻松掌握微信小程序的开发技巧,为用户打造一款实用且美观的新闻阅读应用。
陆业聪
2024/07/23
4420
打造新闻阅读微信小程序:从列表展示到实用功能一应俱全
推荐阅读
相关推荐
小程序根据返回值的int类型渲染不同的状态
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验