<template><div
class="weather":class="`${commmonImgClass(item.dayNight, item.isCheck)}`"></div></template><script>exportdefault{methods:{commmonImgClass(val, state){let result ="";if(val =="昼间"){//设置默认背景图
result ="zhouItem";if(state){//设置选中背景图
result ="currentZhouItem";}}elseif(val =="夜间"){
result ="yeItem";if(state){
result ="currentYeItem";}}return result;},},};</script><style scoped>.zhouItem{background:url('../../../XXX.png');}.currentZhouItem{background:url('../../../XXX.png');}.yeItem{background:url('../../../XXX.png');}.currentYeItem{background:url('../../../XXX.png');}</style>
用于默认的每项图片不一致,选中的每项均一致的情况
<template><div
class="weather":class="`${getClass(index)} ${item.id == curNode ? 'active' : ''}`"></div></template><script>exportdefault{methods:{getClass(index){let result =''if(index ==0){
result ='firstClass'}elseif(index ==1){
result ='twoClass'}return result
}},};</script><style scoped>.firstClass{background:url('../../../XXX.png');}.twoClass{background:url('../../../XXX.png');}.active{background:url('../../../XXX.png');}</style>```