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
})