uni、js——点击与禁用(不可点击)、动态样式class
案例
没约满的时间可以点击进行选择,约满的就不能选择了。选择完之后变色变字。
核心思想就是创建一个第三方变量存起来,点击谁就存到第三方,在根据这个进行判断。
代码
<template><view class="content"><view class="list"><block v-for="(item,index) in list" :key="index"><view @click="change(item)" :class="{'item':true,'orangeBg': item.id === checkMonth.id,'garyBg': item.display===0,'blueBg': item.display===1}"><view>{{item.time}}</view><!-- 写法一 --><!-- <view>{{item.id === checkMonth.id?'已选择':item.display == 0?'约满':'可约'}}</view> --><!-- 写法二 --><view v-if="item.id === checkMonth.id">已选择</view><view v-else>{{item.display == 0?'约满':'可约'}}</view></view></block></view></view>
</template><script>export default {data() {return {type: 1,list: [ {id: 1,time: "00:30",display: 1}, {id: 2,time: "01:00",display: 0}, {id: 3,time: "01:30",display: 1}, {id: 4,time: "02:00",display: 1}, {id: 5,time: "02:30",display: 1},{id: 6,time: "03:00",display: 0}],checkMonth: {}, //·选中的年月份}},onLoad(options) {this.type = options.type},methods: {change(item) {if (!item.display) {uni.showToast({title:"不可点击,点击也没效果",icon:'error',duration:400})return}console.log("可点击");this.checkMonth = item //当前选中的模块console.log(this.checkMonth);}}}
</script><style>.list {width: 800rpx;display: flex;align-items: center;flex-wrap: wrap;}.item {width: 200rpx;height: 200rpx;border: 1px solid red;}.grayBg {background-color: #cccccc;}.blueBg {background-color: skyblue;}.orangeBg {background-color: #FE9202;}
</style>
点击与禁用
if (!item.display) {uni.showToast({title:"不可点击,点击也没效果",icon:'error',duration:400})return
}
点击之后,满足禁用条件直接return
动态样式
:class="{'item':true,'orangeBg': item.id === checkMonth.id,'garyBg': item.display===0,'blueBg': item.display===1
}"
值为true的代表,这个样式一直存在【比如该item样式内含宽高等的固定样式】
2、3、4行为 满足条件的即显示对应的样式
相关文章:

uni、js——点击与禁用(不可点击)、动态样式class
案例 没约满的时间可以点击进行选择,约满的就不能选择了。选择完之后变色变字。 核心思想就是创建一个第三方变量存起来,点击谁就存到第三方,在根据这个进行判断。 代码 <template><view class"content"><view cl…...
分布式技术
分布式没有权威的技术,只有实践经验和积累的组件。常见的分布式技术有发号机制、分布式数据库、分布式数据库事物、基于Redis的分布式缓存、分布式会话、分布式安全认证。 1、发号机制 在数据库(关系数据库)中,主键往往是一条记…...

Consul的简介与安装
1、Consul简介 Consul是一套开源的分布式服务发现和配置管理系统,由HashiCorp公司用Go语言开发,Consul提供了微服务系统中的服务治理、配置中心、控制总线等功能。这些功能中的每一个都可以根据需要单独使用,也可以一起使用以构建全方位的服…...

微服务框架 go-zero logx 日志组件剖析
addTenant api 和 rpc 的实现 上一篇我们说到咱们还剩下 addTenant 功能还未实现,不知道有没有兄弟感兴趣去实验一波的,本篇文章进行简要补充 根据上一篇文章分析,其实我们只需要执行如下几步即可: 编写 tenant.api,…...

基于Java+SpringBoot+Vue前后端分离图书电子商务网站设计和实现
博主介绍:✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专…...

C# Winfrom通过COM接口访问和控制Excel应用程序,将Excel数据导入DataGridView
1.首先要创建xlsx文件 2.在Com中添加引用 3. 添加命名空间 using ApExcel Microsoft.Office.Interop.Excel; --这样起个名字方面后面写 4.样例 //点击操作excelDataTable dt new DataTable();string fileName "D:\desktop\tmp\test.xlsx";ApExcel.Application exA…...
Linux-tomcat环境搭建、jpress部署实践、nginx反向代理
♥️作者:小刘在C站 ♥️个人主页: 小刘主页 ♥️努力不一定有回报,但一定会有收获加油!一起努力,共赴美好人生! ♥️学习两年总结出的运维经验,以及思科模拟器全套网络实验教程。专栏…...

SQLmap使用
文章目录 利用sqlmap 注入得到cms网站后台管理员账密获取数据库名称获取cms数据库的表名获取users表中的字段(内容)获取username字段和password字段的内容 salmap破解psot请求数据包salmap获取getshell 利用sqlmap 注入得到cms网站后台管理员账密 获取数…...

【Flutter】Flutter 使用 infinite_scroll_pagination 实现无限滚动分页
【Flutter】Flutter 使用 infinite_scroll_pagination 实现无限滚动分页 文章目录 一、前言二、安装和基本使用1. 添加依赖2. 基础配置和初始化 三、实际业务中的用法1. 与 API 集成2. 错误处理 四、完整示例1. 创建一个无限滚动列表2. 使用在你的应用中3. 完整代码示例 五、总…...

python爬虫的js逆向入门到进阶教程文章分享汇总~持续更新
目录 一、内容介绍二 、专栏内容-持续更新1、JS逆向入门2、Js逆向进阶3、爬虫基础知识4、工具与安装5、漫星内容分享 三、星球使用四、b站up主视频推荐 一、内容介绍 二 、专栏内容-持续更新 1、JS逆向入门 2023-08-25》11.常见加密>xx音乐RSA加密 https://articles.zsxq.c…...
面试常问:水平居中和垂直居中的方法
水平居中 文本居中 如果元素为行内元素,可以将父元素的text-align属性设置为center,这样子元素就会水平居中对齐 .text{text-align: center; }固定宽度的居中 如果元素宽度已知并固定,可以通过将左右margin设置为auto来实现水平居中。 .…...
第七届“蓝帽杯”初赛取证题目分享
前言: 刚刚打完比赛,准备晚上写一下wp,刚好整理一下题目,ctf的题目一般都有,取证不一定,所以我整理一下,方便大家复盘。 题目: 1:【APK取证】涉案apk的包名是ÿ…...

go语言学习之有关变量的知识
文章目录 变量的学习1.变量的使用步骤2.变量的注意事项3.变量使用的三种方式:4.程序中 号的使用5.变量的数据类型1)int数据类型2)小数类型浮点型3)**字符类型**4)**字符串(String)类型**5&…...

算法通过村第8关【青铜】| 二叉树的经典算法题
二叉树的双指针 1.相同的树 思路:递归的挨个比较是否相同 class Solution {public boolean isSameTree(TreeNode p, TreeNode q) {if((p null&&q!null) || (p ! null && q null) || (p!null&&q!null&&p.val ! q.val)){return f…...

Open3D 点云均值滤波
目录 一、算法原理1、均值滤波2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 1、均值滤波 对待处理的当前采样点,选择一个模板,该模板由其邻近的若干个数据点组成,…...

C语言指针入门详解
一、指针简介 指针(Pointer)是C语言的一个重要知识点,其使用灵活、功能强大,是C语言的灵魂指针与底层硬件联系紧密,使用指针可操作数据的地址,实现数据的间接访问指针就是地址,通过访问此地址来获取该地址存储的数据 …...

软件工程(十四) 设计模式之结构型模式(二)
1、组合模式 简要说明 将对象组合成树形结构以表示“整体-部分”的层次结构,使得用户对单个对象和组合对象的使用具有一致性。 速记关键字 树形目录结构 类图如下 由类图其实可以看出,组合模式就是将具有父子关系的结构,组装形成一棵树,并且根据规范,树干节点和叶子节…...
不解压的方式直接更新jar包内部的内容
前言 如果线上直接更新一个class,可以不用解压,直接利用jar命令直接更新jar报的资源和内容 更新jar包内容文件 Jar 工具提供了一个 u 选项,你可以通过修改其清单或添加文件来更新现有 JAR 文件的内容。 添加文件的基本命令具有以下格式&am…...

软件工程(八) UML之类图与对象图
1、类图与对象图 1.1、类图与对象图的概念 类图(class diagram)描述一组类、接口、协作和它们之间的关系 对象图(object diagram)描述一组对象及它们之间的关系、对象图描述了在类图中所建立的事物实例的静态快照。 1.2、类图与对象图的区别 类图和对象图基本上是一样…...

【Unity3D赛车游戏】【五】Unity中汽车加速效果是如何优化的?
👨💻个人主页:元宇宙-秩沅 👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨💻 本文由 秩沅 原创 👨💻 收录于专栏:Uni…...

RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...

如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...