解决vue这段代码无法正常显示的问题并说出来给我template div class=wrapper div class=current-status img src=currentBeastStatusImg alt=currentBeastAlt p currentBeast s turnp div div class=board div c

这段代码无法正常显示的问题是在currentBeastStatusImg和currentBeastAlt属性中使用了字符串模板。解决方法是将字符串模板改成正常的字符串。

修改后的代码如下：

<template>
  <div class="wrapper">
    <div class="current-status">
      <img :src="currentBeastStatusImg" :alt="currentBeastAlt" />
      <p>{{ currentBeast }}'s turn</p>
    </div>
    <div class="board">
      <div class="cell" v-for="(cell, index) in cells" :key="index" @click="handleCellClick(index)"></div>
    </div>
    <div class="game-end-overlay" :class="{ show: gameEnd }">
      <div class="winning-message">
        <p>{{ winningMessage }}</p>
      </div>
      <div class="btn-container">
        <button class="reset-button" @click="resetGame">play again</button>
      </div>
    </div>
    <video src="@/assets/03.mp4" muted loop autoplay></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cells: Array(9).fill(null),
      currentBeast: "unicorn",
      currentBeastStatusImg: require("@/assets/1.gif"),
      currentBeastAlt: "unicorn",
      gameEnd: false,
      winningMessage: "",
      winningMessageImg: null,
      unicornTurn: true,
      winningCombinations: [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6]
      ]
    };
  },
  methods: {
    handleCellClick(index) {
      if (this.gameEnd || this.cells[index]) return;

      this.cells[index] = this.currentBeast;
      this.$set(this.cells, index, this.currentBeast);

      if (this.checkWin(this.currentBeast)) {
        this.winningMessage = `${this.currentBeast} wins!!!`;
        this.gameEnd = true;
        this.winningMessageImg = this.currentBeastStatusImg;
        return;
      }
      if (this.isDraw()) {
        this.winningMessage = "draw!";
        this.gameEnd = true;
        return;
      }
      this.swapTurns();
      this.updateCurrentStatus();
    },
    checkWin(currentBeast) {
      return this.winningCombinations.some(combination => {
        return combination.every(i => {
          return this.cells[i] === currentBeast;
        });
      });
    },
    isDraw() {
      return this.cells.every(cell => cell !== null);
    },
    swapTurns() {
      this.unicornTurn = !this.unicornTurn;
    },
    updateCurrentStatus() {
      if (this.unicornTurn) {
        this.currentBeast = "unicorn";
        this.currentBeastStatusImg = require("@/assets/1.gif");
        this.currentBeastAlt = "unicorn";
      } else {
        this.currentBeast = "dragon";
        this.currentBeastStatusImg = require("@/assets/2.gif");
        this.currentBeastAlt = "dragon";
      }
    },
    resetGame() {
      this.cells = Array(9).fill(null);
      this.currentBeast = "unicorn";
      this.currentBeastStatusImg = require("@/assets/1.gif");
      this.currentBeastAlt = "unicorn";
      this.gameEnd = false;
      this.winningMessage = "";
      this.winningMessageImg = null;
      this.unicornTurn = true;
    }
  },
  created() {
    this.updateCurrentStatus();
  }
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  font-family: "Bungee Inline", cursive;
  color: #f5f5f5;
  overflow: hidden;
}

video {
  position: absolute;
  z-index: -999;
}

.wrapper {
  background-color: #55acee53;
  padding: 50px;
}

.current-status {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}

.current-status p {
  margin: 0 5px 0 0;
  font-size: 24px;
}

.current-status img {
  width: auto;
  height: 32px;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  grid-template-rows: repeat(3, minmax(90px, 1fr));
  grid-gap: 12px;
  width: 100%;
  height: 100%;
  max-width: 495px;
  margin: 0 auto 15px;
}

/* 鼠标悬浮的时候显示图片 */
.board.unicorn .cell:not(.dragon):not(.unicorn):hover::before,
.board.dragon .cell:not(.dragon):not(.unicorn):hover::before {
  content: "";
  width: 70%;
  height: 70%;
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-size: contain;
  opacity: 50%;
}

.board.unicorn .cell:not(.dragon):hover::before {
  background-image: url("@/assets/1.gif");
}

.board.dragon .cell:not(.unicorn):hover::before {
  background-image: url("@/assets/2.gif");
}

.cell {
  cursor: pointer;
  position: relative;
  background-color: #f5f5f5;
  width: 90px;
  height: 90px;
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}

.cell:hover {
  opacity: 1;
}

.cell.dragon,
.cell.unicorn {
  opacity: 1;
  position: relative;
  cursor: not-allowed;
}

.cell.dragon::before,
.cell.unicorn::before {
  content: "";
  width: 70%;
  height: 70%;
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-size: contain;
}

.cell.dragon::before {
  background-image: url("@/assets/1.gif");
}

.cell.unicorn::before {
  background-image: url("@/assets/2.gif");
}

.game-end-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #0d1021;
}

.game-end-overlay.show {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.winning-message {
  margin: -50px 0 20px;
}

.winning-message img {
  width: 100px;
}

.winning-message p {
  font-size: 48px;
  margin: 0;
}

.btn-container {
  position: relative;
}

.reset-button {
  color: #f5f5f5;
  font-family: "Bungee Inline", cursive;
  font-size: 30px;
  white-space: nowrap;
  border: none;
  padding: 10px 20px;
  background-color: #a186be;
  box-shadow: 5px 5px 0 #55acee;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
  position: relative;
}

.reset-button:hover {
  transform: scale(1.2);
}

.reset-button:active {
  top: 6px;
  left: 6px;
  box-shadow: none;
  background-color: #9475b5;
}
</style>