当前位置:网站首页>使用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();
},
是谁又写了如此丑陋的代码啊
原来又是我啊
那没事了
少年加油努力
边栏推荐
猜你喜欢
随机推荐
【Oracle的NVL函数用法】
Socket (udp) console program under window
GeoServer入门学习:02-安装部署
第七章 类与对象
Redis之持久化机制
Centos下载安装redis- 使用yum
Getting Started with GeoServer: 04-Publishing Shapfile Map Data
一、Canvas应用的背景(个人理解)及基础语法
pytorch实现数据集读取/下载
unity报Unable to load the icon: 'CacheServerDisconnected'时的解决办法
用js写一个简单的前世今生
【线性代数04】投影矩阵P和标准正交矩阵Q
window下socket(TCP)控制台程序
【梦想的声音】
第十一章 集合
Jenkins下载安装
C 预处理器
Centos安装Redis --使用wget
Non-resolvableparent POM for xxxx: Could not find artifact xxx and ‘parent.relativePath‘ points at
文档图像二值化DIB_database







