1.封装根据标志变量变化的图片 and 文字组件

注意：如果一段html代码太长(实现一个功能的东西），或者逻辑判断太多，可以封装成一个组件，这样会更清晰点

将图片的 src 写在 js 中进行判断，会让页面模版看起来更加清晰

但是 js 中构建图片 src 必须用 require 引入的方式：require(../../../assets/images/squirrelCup/${year}/${season}/countryGame/sixFour.png);}

<template>
  <div class="back-score">
    <img :src="backImg" />
    <span v-if="knockoutType === 1">全国<label>64</label>强战队</span>
    <span v-if="knockoutType === 2">青龙战区冠军</span>
    <span class="beforeThree" v-if="knockoutType === 3">全国冠军战队</span>
    <span class="beforeThree" v-if="knockoutType === 4">全国亚军战队</span>
    <span class="beforeThree" v-if="knockoutType === 5">全国季军战队</span>
  </div>
</template>
<script>
export default {
  name: "rankingImg",
  data() {
    return {
      backImg: "",
    };
  },
  props: {
    gameTime: {
      type: String,
      default: "2023_summer",
    },
    knockoutType: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    //处理背景图片的展示
    let year = this.gameTime.split("_")[0];
    let season = this.gameTime.split("_")[1];
    if (this.knockoutType === 1) {
      this.backImg = require(`../../../assets/images/squirrelCup/${year}/${season}/countryGame/sixFour.png`);
    } else if (this.knockoutType === 2) {
      this.backImg = require(`../../../assets/images/squirrelCup/${year}/${season}/countryGame/areaFirst.png`);
    } else if (this.knockoutType === 3) {
      this.backImg = require(`../../../assets/images/squirrelCup/${year}/${season}/countryGame/first.png`);
    } else if (this.knockoutType === 4) {
      this.backImg = require(`../../../assets/images/squirrelCup/${year}/${season}/countryGame/second.png`);
    } else if (this.knockoutType === 5) {
      this.backImg = require(`../../../assets/images/squirrelCup/${year}/${season}/countryGame/third.png`);
    }
  },
};
</script>

2.基于时间点名字的动态 class / style

class 动态类名，对应了一个个 class，后续有新的需求的时候我们只需要新增 class 即可，便于维护

而不是在行内去判断一个值然后指定一个类名，那需要在 html 中写非常多的判断！不好维护！

<img
     src="../../../../assets/images/winterGame/poster/committeeSeal.png"
     :class="[gameTime.split('_')[1] + '_' + gameTime.split('_')[0]]"
     />

gameTime 默认是“2023_summer”这样的，但是 class 类名不允许以数字开头，所以我们交换这两个的位置

在 css 中添加对应时间点的样式：

.summer_2023 {
  justify-content: center;
  margin-bottom: 62px;
  dl {
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // justify-content: center;
    dt {
      background: url("../../../../assets/images/squirrelCup/2023/summer/block.png")
        center no-repeat;
      background-size: contain;
      width: 220px;
      height: 104px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
    }
  }
}
.spring_2023 {
  bottom: -130px;
}

动态样式应当尽可能多地用 class，少用行内样式

1.判断变量指定类

<header :class="[type === 'day' && win === true ? 'win-header' : '']">

.win-header {
  height: auto !important;
  margin-bottom: 70px !important;
}

案例：手写动态样式选项卡

<ul>
  {
    this.state.list.map((item, index)=>{
      <li key={item.id} class={this.state.currentIndex === index ? 'active' : ''}>{item.text}</li>
    })
  }
</ul>

借助模板语法，我们不需要在使用笨重的jquery 实现动态选项卡（使用.siblings方法），不需要使用原生 js实现动态选项卡

2.动态类名

<div :class="['battleReport' + posterData.teamStatus]" class="battleReport">

&.battleReport1 {
  main {
    position: absolute;
    top: 612px;
    left: 0;
    right: 0;
  }
}
&.battleReport2 {
  font-size: 18px;
}

混合判断变量指定类 + 动态类名

<section
         :class="[
                 'winStatus_' +
                 (scheduleData.team_id_b === padTeamId
                 ? scheduleData.status_b
                 : scheduleData.status_a),
                 scheduleData.team_id_b === padTeamId ? 'rowReverse' : '',
                 ]"
         class="section"
         >

动态行内样式 style

1.一个 style 样式

<div :style="flag?'bottom:100px':''"></div>

2.多个 style 样式

<!--写法一-->
<div :style="flag ? 'position: absolute; bottom: 100px;' : ''"></div>
<!--写法二-->
<div :style="flag ? {position: 'absolute', bottom: '100px'} : ''"></div>

两种写法在结果上是相同的，它们都可以根据 flag 的值将相应的样式应用到元素上。对象形式的写法在样式较多时更具可读性和扩展性，而字符串形式的写法在样式较简单时更为简洁。

3.绝对定位的位置设置策略

注意：一个方向上的，比如 top和 bottom 不能同时生效，两者只能生效权重较大的那个

4.replace() 方法注意事项

replace() 方法默认只会替换第一个匹配项。如果想要替换所有匹配项，可以使用正则表达式的全局修饰符 g，这样可以将所有匹配的项都进行替换。

以下是一个示例，演示如何使用全局修饰符 g 来替换字符串中的所有双引号：

var str = '这是一个"带有"双引号的"字符串"';
var result = str.replace(/"/g, ''); //注意：/和/之间是正则表达式
console.log(result);

在上述代码中，正则表达式 /"/g 中的 g 表示全局匹配。这样，replace() 方法会将所有的双引号都替换为空字符串。