vue选项切换显示两种不同的样式，在都不选择的时候另一个元素显示隐藏,第二种通用

本文链接：https://blog.csdn.net/m0_64207574/article/details/125807488

   
html中
v-for遍历了arr
<span v-for="(v,i) in arr" :key="i" @click="changE(i)">
            <img v-if="v.checked" :src="v.imgSrcTrue" alt="">
            <img v-else :src="v.imgSrcFalse" alt="">
 </span>
<div v-if="arrItem">
        展示的样式
</div>


data中 
arr:[{
          checked:false,
          title:"显示1",
          imgSrcFalse: require("../assets/images/home/no-1.png"),
          imgSrcTrue: require("../assets/images/home/yes-1.png"),
        },
        {
          checked:false,
          title:"显示2",
          imgSrcFalse: require("../assets/images/home/no-2.png"),
          imgSrcTrue: require("../assets/images/home/yes-2.png"),
        }]，
arrItem:'',//选择的对象




方法里
//点击事件
changE(key){
      if(this.arr.length > 1){
        if(key == 0){
          this.arr[1].checked = false
        }else{
          this.arr[0].checked = false
        }
      }
      this.arr[key].checked = !this.arr[key].checked
       //筛选出符合条件的显示样式
      this.arrItem = this.arr.find(item => item.checked)
       if(this.arrItem){
            开始各种显示你的操作即可
        }
}

此方法的代码可能很垃圾，但是显示和隐藏的效果还是ok的，仅限少量的选项

下面是多个选项的选择

   
html中
v-for遍历了arr
<span v-for="(v,i) in arr" :key="i" @click="changE(i)">
            <img v-if="v.checked" :src="v.imgSrcTrue" alt="">
            <img v-else :src="v.imgSrcFalse" alt="">
 </span>
<div v-if="arrItem">
        展示的样式
</div>


data中 
arr:[{
          checked:false,
          title:"显示1",
          imgSrcFalse: require("../assets/images/home/no-1.png"),
          imgSrcTrue: require("../assets/images/home/yes-1.png"),
        },
        {
          checked:false,
          title:"显示2",
          imgSrcFalse: require("../assets/images/home/no-2.png"),
          imgSrcTrue: require("../assets/images/home/yes-2.png"),
        }]，
arrItem:'',//选择的对象




方法里
//点击事件
changE(key){
        if(this.arr[key].checked){
          this.arr.forEach((item)=>{
            item.checked = false
          })
        }else{
          this.arr.forEach((item)=>{
            item.checked = false
          })
          this.arr[key].checked = !this.arr[key].checked
        }
       //筛选出符合条件的显示样式
      this.arrItem = this.arr.find(item => item.checked)
       if(this.arrItem){
            开始各种显示你的操作即可
        }
}

或者,推荐下面这个方法

this.arr.forEach((item, i) => {
        item.checked = item.checked ? false : key == i
      })