给盒子添加默认背景图和选中背景图

爱吃羊的狗

已于 2022-11-22 10:55:37 修改

阅读量375

点赞数

分类专栏： vue 文章标签：前端 html

于 2022-11-22 10:53:49 首次发布

本文链接：https://blog.csdn.net/VIVI_CSDN01/article/details/127977640

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

给盒子添加默认背景图和选中背景图

用于每张默认图片和每张选中图片均不一致的情况

<template>
  <div
    class="weather"
    :class="`${commmonImgClass(item.dayNight, item.isCheck)}`"
  ></div>
</template>

<script>
export default {
  methods: {
    commmonImgClass(val, state) {
      let result = "";
      if (val == "昼间") {
        //设置默认背景图
        result = "zhouItem";
        if (state) {
          //设置选中背景图
          result = "currentZhouItem";
        }
      } else if (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>
export default {
  methods: {
    getClass(index) {
      let result = ''
      if(index == 0){
        result = 'firstClass'
      }else if(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>```