当前位置:网站首页>使用v-for完成图标单选三选一
使用v-for完成图标单选三选一
2022-08-08 21:12:00 【kkkkkkkkira】
使用v-for完成图标单选三选一
中心思想:true时显示被选中状态的图,false显示未被选中的图,且只能存在一个true,可以有多个false
//定义初始状态
export default {
name: "App",
data() {
return {
cumDuration: true,
useTime: false,
defectsNum: false,
};
//img在未被选中时才需要actived,所以方法要写在变量==false中
<el-row :gutter="20">
<el-col :span="7">
<div class="topBtn">
<img v-if="cumDuration" src="../assets/iconfont/chooseIcon.png" />
<img v-else src="../assets/iconfont/unchoseIcon.png" @click="getRankChange('testtime')"/>
<p>累计时长</p>
</div>
</el-col>
<el-col :span="7">
<div class="topBtn" >
<img v-if="useTime" src="../assets/iconfont/chooseIcon.png" />
<img v-else src="../assets/iconfont/unchoseIcon.png" @click="getRankChange('taskID')"/>
<p>使用次数</p>
</div> </el-col
><el-col :span="7">
<div class="topBtn" >
<img v-if="defectsNum" src="../assets/iconfont/chooseIcon.png" />
<img v-else src="../assets/iconfont/unchoseIcon.png" @click="getRankChange('defectSum')"/>
<p>缺陷总个数</p>
</div>
</el-col>
</el-row>
//一个被选中,其他两个置false
getRankChange(way) {
if (way == "testtime") {
this.cumDuration = !this.cumDuration;
this.useTime = false;
this.defectsNum = false;
} else if (way == "taskID") {
this.useTime = !this.useTime;
this.cumDuration = false;
this.defectsNum = false;
} else {
this.defectsNum = !this.defectsNum;
this.cumDuration = false;
this.useTime = false;
}
//method中写一下默认下显示内容,在created中调用
init() {
this.getRankChange("testtime");
this.cumDuration= true
},
created() {
this.init();
},
是谁又写了如此丑陋的代码啊
原来又是我啊
那没事了
少年加油努力
边栏推荐
- [MEF]第04篇 MEF的多部件导入(ImportMany)和目录服务
- Redis之HyperLogLog
- GeoServer introductory study: 07 - release a larger multi-tiered TIF map data
- 推荐7款好用的Visual Studio扩展
- 去噪论文 Beyond a Gaussian Denoiser: Residual Learning of Deep CNN for Image Denoising
- GeoServer Getting Started Learning: 06-Publishing Multi-level TIF Map Data
- position的值,relative和absolute分别相对谁定位
- leetcode 217存在重复元素
- WebView的使用
- 【梦想的声音】
猜你喜欢
随机推荐
Bagging、Boosting、Stacking集成学习代码
rust-异常机制
小程序——切割字符串
SIGIR 2022 | MCCLK: 一个用于知识感知推荐的多层次的交叉视图对比框架
波动数列,简易AC代码,详细讲解。
matlab入门基础:矩阵操作(一)
GeoServer入门学习:02-安装部署
差分约束
中国石油大学(北京)-《 油田化学》第三阶段在线作业
Getting Started with GeoServer: 04-Publishing Shapfile Map Data
01背包问题,简易AC代码加详细讲解,地宫寻宝,波动数列等DP问题。
C语言斐波那锲数列前n项求和
全国基础地理数据库数据预处理
安装sentry
selenium基本使用
Iterative version of preorder traversal, inorder traversal, and postorder traversal of binary tree
[MEF]第05篇 MEF的目录(Catalog)筛选
window下socket(TCP)控制台程序
分别用BeautifulSoup和scrapy爬取某一城市天气预报
第九章 常用类解析