原文(我的博客): http://blog.musclewiki.cn/post.html?id=137&index=false
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>body {font: 14px "Century Gothic", Futura, sans-serif;margin: 20px;}ol,ul {padding-left: 30px;}.board-row:after {clear: both;content: "";display: table;}.status {margin-bottom: 10px;}.square {background: #fff;border: 1px solid #999;float: left;font-size: 100px;font-weight: 700;line-height: 100px;height: 100px;margin-right: -1px;margin-top: -1px;padding: 0;text-align: center;width: 100px;}.square:focus {outline: none;}.kbd-navigation .square:focus {background: #ddd;}.game-info {margin-top: 20px;}style><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js">script>
head><body>
<div id="app"><Game>Game>
div><template id="tplSquare"><button class="square" @click="$emit('click')">{{id}}button>
template><template id="tplBoard"><div class="row"><div class="board-row" v-for="row in [[0,1,2],[3,4,5],[6,7,8]]"><Square v-for="i in row" :id="squares[i]" @click="$emit('click', i)" />div>div>
template><template id="tplGame"><div class="game"><div class="game-board"><Board @click="click" :squares="history[stepNumber].squares" />div><div class="game-info"><div v-if="winner">Winner: {{winner}}div><div v-if="!winner">Next player: {{xIsNext ? "X" : "O"}}div><ol><li v-for="(h,move) in history"><button @click="jumpTo(move)">{{move?"Go to move #"+move:"Go to game start"}}button>li>ol>div>div>
template><script>Vue.component('Square', {props: { id: null },template: "#tplSquare"})Vue.component('Board', {props: { squares: [] },template: "#tplBoard"})Vue.component('Game', {data() {return {history: [{ squares: Array(9).fill(null) }],stepNumber: 0,xIsNext: true,status: "",winner: "",}},methods: {jumpTo(step) {this.stepNumber = stepthis.xIsNext = (step % 2) === 0},calculateWinner(squares) {const lines = [[0, 1, 2], [3, 4, 5], [6, 7, 8],[0, 3, 6], [1, 4, 7], [2, 5, 8],[0, 4, 8], [2, 4, 6],];for (let i = 0; i < lines.length; i++) {const [a, b, c] = lines[i];if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {return squares[a];}}return null;},click(id) {const history = this.history.slice(0, this.stepNumber + 1)const current = history[history.length - 1]const squares = current.squares.slice()this.winner = this.calculateWinner(squares)if (this.winner || squares[id]) returnsquares[id] = this.xIsNext ? "X" : "O"this.history = history.concat([{ squares: squares }])this.stepNumber = history.lengththis.xIsNext = !this.xIsNextthis.winner = this.calculateWinner(squares)}},template: "#tplGame"})new Vue({ el: '#app' })
script>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
