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…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
docker 部署发现spring.profiles.active 问题
报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...
【Redis】笔记|第8节|大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点: 多级缓存,先查本地缓存,再查Redis,最后才查数据库热点数据重建逻辑使用分布式锁,二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面,gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress,说明目标所使用的cms是wordpress,访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
解读《网络安全法》最新修订,把握网络安全新趋势
《网络安全法》自2017年施行以来,在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂,网络攻击、数据泄露等事件频发,现行法律已难以完全适应新的风险挑战。 2025年3月28日,国家网信办会同相关部门起草了《网络安全…...
