Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >uniapp根据不同的状态渲染不同的标签

uniapp根据不同的状态渲染不同的标签

作者头像
王小婷
发布于 2025-05-20 03:21:45
发布于 2025-05-20 03:21:45
5200
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view class="text-grey text-xs">
                    <button v-if="item.isLeave === 0">离厂解绑</button>
                    <span v-else > {{item.leaveTime | formatDate }} </span>
                    </view>

json数据

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "msg": "查询成功",
    "total": 15,
    "code": 1,
    "rows": [{
            "isLeave": 0,
            "leaveTime": "2021-06-23"
        }, {
            "isLeave": 1,
            "leaveTime": "2021-06-24"
        }, {
            "isLeave": 0,
            "leaveTime": "2021-06-25"
        },
        {
            "isLeave": 1,
            "leaveTime": "2021-06-26"
        }
    ]
}

test.vue

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <view>
        <view class="cu-list menu-avatar">
            <view class="cu-item" v-for="(item,index) in productList" :key="index">
                <view class="">
                    <button v-if="item.isLeave === 0" @click.stop="isLeave()">离厂解绑</button>
                    <view v-else class="text-grey text-xs">{{item.leaveTime }}</view>
                </view>

            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                productList: [],
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            getList() {
                /* this.$request.get('/api/test.json', {
                    
                }).then(res => {                
                    // 打印调用成功回调
                    console.log(res)
                    this.productList = res.data.rows;
                }) */
                uni.request({
                    url: '/api/test.json',
                    success: (res) => {
                        console.log(res.data);
                        this.productList = res.data.rows;
                    }
                });
            },
        },
    }
</script>
<style>
    page {
        padding-top: 50px;
    }

    .header {
        position: absolute;
        top: 0;
        height: 44px;
        width: 100%;
        line-height: 50px;
        background-color: rgb(45, 47, 186);
        color: #fff;
    }

    .header text {
        display: inline-block;
        text-align: center;
    }

    .cu-bar.fixed,
    .nav.fixed {
        top: 45px;
    }

    .cu-list.menu-avatar>.cu-item {
        height: 92px;
        margin: 10px;
        box-shadow: 0 2px 5px -1px #c4c0c0;
    }
</style>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
uni-app请求接口跨域
服务器json数据:http://www.xxx.com/test.json(个人域名不方便展示,用xxx代替隐藏) 数据是这样的,直接可以在浏览器访问到。
王小婷
2021/07/08
4.9K0
uniapp封装request请求
定义域名:baseUrl; 定义方法:api; 通过promise异步请求,最后导出方法。
王小婷
2021/07/01
4.4K0
🥬 🐶的uniapp学习之🦌 【计时器】
我这里使用的是npm安装。如果是纯的uniapp项目,是没有包管理器package.json的,更没有node_modules的。
用户4793865
2023/01/12
1.7K0
uni-app点击按钮,生成列表元素
在jQuery里面,动态生成div元素需要进行html的拼接,拼接完成再将拼接的内容放到指定的div里面去,在vue中一般编写代码时都不需要操作DOM元素,那么点击按钮的时候,怎么动态生成自己想要的列表元素?
王小婷
2020/11/30
1.4K0
新建一个uniapp请求,并且封装request
定义域名:baseUrl; 定义方法:api; 通过promise异步请求,最后导出方法。
王小婷
2022/06/12
3.7K1
新建一个uniapp请求,并且封装request
uniapp格式化渲染性别,状态,等级
前后端交互的时候,后端经常会返回一些int类型的返回值,这个时候前端需要对这种数据类型进行一些处理,渲染在界面上。
王小婷
2020/07/01
6270
uniapp格式化渲染性别,状态,等级
uni-app实现一个循环卡片效果
ColorUI-UniApp是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值,高度自定义的Css组件库,项目里好多地方都用的到这个UI组件 今天记录一个ColorUI-UniApp的使用和实现循环卡片效果。
王小婷
2019/12/30
4.8K0
uni-app实现一个循环卡片效果
uni-app渲染商品列表
<template> <view class="page"> <view class="uni-product-list"> <view class="uni-product" v-for="(item,index) in productList" :key="index"> <view class="image-view"> <image v-if="renderImage" class
王小婷
2019/12/24
2.8K1
uni-app渲染商品列表
使用 Uniapp + UniCloud 云开发微信小程序获取用户信息(完整版)
小程序作为前端必备技能,在学习过程中会需要让自己建立一个新的框架区域,让自己抛弃掉所用的技术框架:vue、react、angular等。
猿来是前端
2022/09/19
8.1K2
使用 Uniapp + UniCloud 云开发微信小程序获取用户信息(完整版)
17.普通用户、网格长、网格员,操作数据(4)newapp/components/wgz.vue
1.在newapp/components/wgz.vue中: <template> <view> <view class="cu-bar bg-white solid-bottom"> <view class="action"> <text class="cuIcon-title text-orange"></text> {{data3.pq.name}} </view>
玩蛇的胖纸
2020/07/03
3820
uni-app里面使用uni.request请求并且渲染列表
1:新建一个uniapp项目,命名为test。 2:官方网站找文档,要用到列表组件 地址导航:https://ext.dcloud.net.cn/plugin?id=24 导入到自己的test项目里
王小婷
2020/07/10
2.3K0
超有意思,圣诞节自己做一个装饰圣诞帽头像的APP!
话说又到了一年一度到别人到节日,圣诞节,还记得去年的时候,朋友圈疯狂转发到圣诞帽嘛,在圣诞节为自己到头像增加一款圣诞帽还是蛮应景的。
程序员小二
2021/12/25
3680
超有意思,圣诞节自己做一个装饰圣诞帽头像的APP!
uni-app 结合云函数开发小程序博客(三):接入云函数,实现完善的列表刷新机制
因为项目做的是博客demo, 首页进来想给人直观的就能看到文章,看到分类。所以想的一个是可以左右滑动,切换分类,一个是页面以列表形式,直接 list 渲染。类似掘金的样式:
一只图雀
2020/05/20
4.4K0
6.页面绘制-帖子列表页和前端路由
在pages/shequ目录下新建页面tiezi。然后在pages.json中将tiezi配置为首页,方便观察调试。
玩蛇的胖纸
2021/07/13
5260
vue+vue-cropper实现上传剪裁图片以及上传时压缩图片
代码暂时都是从项目中抽出来的,只适合借鉴参考,等有时间再单独将这些功能单独写项目,欢迎大家提供更好用的方法或指出不足之处,一起进步。
conanma
2021/11/03
3.7K0
uniapp-vue3-wechat聊天实例|uni-app+pinia2仿微信app
Uniapp_Vue3_Chat基于uni-app+vue3+pinia2+uv-ui跨三端(h5+小程序+APP端)仿微信聊天。
andy2018
2024/04/29
7400
uni-app实战之社区交友APP(7)消息页开发
本文主要介绍了消息也的开发,主要包括3部分: 消息列表页开发,包括页面配置、消息列表组件的开发和封装、下拉刷新功能和下拉弹出层组件的使用; 我的好友列表页开发,包括页面配置、导航组件开发、好友列表组件开发和封装、以及性别图标显示; 聊天页面开发,包括页面配置、输入框组件开发、聊天列表组件的开发和封装、以及聊天页功能完善。
cutercorley
2021/02/04
2.3K0
uni-app实战之社区交友APP(7)消息页开发
深度使用 Vue Vine 四天之后,谈谈我的使用体验
当我在 Vue Conf 大会中看到 Vue Vine 这种新的开发方式之后,我非常的激动。因为我确实非常喜欢这种语法。因此在周日当天,我就通过自己的摸索跑通了一个 demo,并写了一篇文章跟大家介绍它。
用户6901603
2024/07/12
8110
深度使用 Vue Vine 四天之后,谈谈我的使用体验
你的网站或许不需要前端构建
本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议,欢迎转载、或重新修改使用,但需要注明来源。 署名 4.0 国际 (CC BY 4.0)
soulteary
2023/03/05
6720
你的网站或许不需要前端构建
【愚公系列】2022年11月 uniapp专题-优购电商-个人中心页面
个人中心的信息复杂度与产品本身有关。体系越庞大的产品,对应个人中心页面需要承载的内容越多,结构势必复杂。
愚公搬代码
2022/12/05
6060
【愚公系列】2022年11月 uniapp专题-优购电商-个人中心页面
推荐阅读
相关推荐
uni-app请求接口跨域
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验