vue实现井字棋游戏，附着原始代码

		<template>
	  <div id="app">
	    <h1>Tic Tac Toe</h1>
	    <div class="board">
	      <div
	        v-for="(cell, index) in board"
	        :key="index"
	        class="cell"
	        @click="handleClick(index)"
	      >{{ cell }}</div>
	    </div>
	    <div class="status">
	      <p v-if="winner">Winner: {{ winner }}</p>
	      <p v-else-if="isBoardFull">It's a draw!</p>
	      <p v-else>Next Player: {{ currentPlayer }}</p>
	    </div>
	    <button @click="resetBoard">Reset Game</button>
	  </div>
	</template>
	
	<script>
	export default {
	  data() {
	    return {
	      board: Array(9).fill(null),
	      currentPlayer: 'X',
	      winner: null
	    }
	  },
	  computed: {
	    isBoardFull() {
	      return this.board.every(cell => cell !== null)
	    }
	  },
	  methods: {
	    // index表示玩家点击格子的索引位置
	    handleClick(index) {
	      // !this.board[index]判断点击的格子是否为空； !this.winner是否有胜利者
	      if (!this.winner && !this.board[index] && !this.isBoardFull) {
	        this.board[index] = this.currentPlayer // 将当前格子设置为当前玩家
	        this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X' // 切换玩家
	        this.checkWinner() // 点击一次调用下面的方法判断是否获胜
	      }
	    },
	    checkWinner() {
	      const winningCombos = [
	        [0, 1, 2],
	        [3, 4, 5],
	        [6, 7, 8], // Rows
	        [0, 3, 6],
	        [1, 4, 7],
	        [2, 5, 8], // Columns
	        [0, 4, 8],
	        [2, 4, 6] // Diagonals
	      ]
	      // 在循环内部，我们使用解构赋值将当前获胜组合的三个元素（a、b、c）分别赋给这些变量。
	
	      // 接下来，我们检查游戏板中的这三个位置（a、b、c）是否都包含相同的玩家标记（'X' 或 'O'）并且不为空。如果是，则表示有一个玩家在这个获胜组合中获胜。
	
	      // 如果找到了一个获胜组合，我们将 this.winner 设置为当前玩家（this.currentPlayer），表示这个玩家获胜。
	
	      // 最后，我们使用 return 来退出循环，因为只要找到
	      for (const combo of winningCombos) {
	        const [a, b, c] = combo
	        if (
	          this.board[a] &&
	          this.board[a] === this.board[b] &&
	          this.board[a] === this.board[c]
	        ) {
	          this.winner = this.currentPlayer
	          return alert('你获胜了！')
	        }
	      }
	    },
	    resetBoard() {
	      this.board = Array(9).fill(null)
	      this.currentPlayer = 'X'
	      this.winner = null
	    }
	  }
	}
	</script>
	
	<style scoped>
	.board {
	  display: grid;
	  grid-template-columns: repeat(3, 100px);
	  grid-gap: 5px;
	  margin-top: 20px;
	}
	
	.cell {
	  width: 100px;
	  height: 100px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 24px;
	  background-color: #eee;
	  cursor: pointer;
	}
	
	.cell:hover {
	  background-color: #ddd;
	}
	
	.status {
	  margin-top: 20px;
	}
	
	button {
	  margin-top: 10px;
	  background-color: #007bff;
	  color: #fff;
	  padding: 10px 20px;
	  border: none;
	  cursor: pointer;
	  font-size: 18px;
	}
	
	button:hover {
	  background-color: #0056b3;
	}
	</style>