使用v-for完成图标单选三选一

使用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();
  },

是谁又写了如此丑陋的代码啊
原来又是我啊
那没事了
少年加油努力