安徽网站设计方案,网站开发工程师大学,.net开发网站怎么样,免费建站平台的源码案例 没约满的时间可以点击进行选择#xff0c;约满的就不能选择了。选择完之后变色变字。 核心思想就是创建一个第三方变量存起来#xff0c;点击谁就存到第三方#xff0c;在根据这个进行判断。
代码
templateview classcontentview cl…案例 没约满的时间可以点击进行选择约满的就不能选择了。选择完之后变色变字。 核心思想就是创建一个第三方变量存起来点击谁就存到第三方在根据这个进行判断。
代码
templateview classcontentview classlistblock v-for(item,index) in list :keyindexview clickchange(item) :class{item:true,orangeBg: item.id checkMonth.id,garyBg: item.display0,blueBg: item.display1}view{{item.time}}/view!-- 写法一 --!-- view{{item.id checkMonth.id?已选择:item.display 0?约满:可约}}/view --!-- 写法二 --view v-ifitem.id checkMonth.id已选择/viewview v-else{{item.display 0?约满:可约}}/view/view/block/view/view
/templatescriptexport 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);}}}
/scriptstyle.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.display0,blueBg: item.display1
}值为true的代表这个样式一直存在【比如该item样式内含宽高等的固定样式】
2、3、4行为 满足条件的即显示对应的样式
