Question

我正在制作一个Tic-Tac-Toe网络应用程序。它还没有完成，因为这个问题已经引发了障碍。当X或O获胜时，它应该将3个获胜框变为绿色（如果我删除了之后想要发生的过渡，则此部分有效）。一旦盒子是绿色的，整个＆＃39; Board＆＃39;桌子应该“反弹”。但实际发生的事情是＆＃39; Board＆＃39;在“标记”之前正在反复出现。（X / O）甚至显示，获胜框变为绿色。对我来说没有意义的是，代码执行的重点应该是从上到下，但它看起来并不像那样。我尝试过几种不同的方式重新安排代码，但仍然没有运气。

Here is the Codepen

以下是那些不想点击链接的代码：P（对于样式很抱歉，代码段不能正常工作= /

顺便说一句，提前谢谢！

＆＃13;

console.clear();
const log = console.log.bind(console);

const game = new Vue({
	el: '#app',
	data: {
		turn: 'X',
		over: false,
		board: [[{val:'',bg:''}, {val:'',bg:''}, {val:'',bg:''}],
					  [{val:'',bg:''}, {val:'',bg:''}, {val:'',bg:''}],
					  [{val:'',bg:''}, {val:'',bg:''}, {val:'',bg:''}]],
		windex: [[[0,0], [0,1], [0,2]],
						 [[1,0], [1,1], [1,2]],
						 [[2,0], [2,1], [2,2]],
						 [[0,0], [1,0], [2,0]],
						 [[0,1], [1,1], [2,1]],
						 [[0,2], [1,2], [2,2]],
						 [[0,0], [1,1], [2,2]],
						 [[0,2], [1,1], [2,0]]],
		check() {
			const arr = this.board.map( x => x.map( y => y.val ));
			const winArr = this.windex.map( x => x.map( y => this.board[y[0]][y[1]].val ));
			const winner = winArr.map( (x,ind) => {
				if( x.every( y => y == 'X' )) return 'X';
				if( x.every( y => y == 'O' )) return 'O';
			});
			if(winner.includes('X')){
				const inds = this.windex[winner.indexOf('X')];
				inds.forEach( x => {
					this.board[x[0]][x[1]].bg = 'active';
				});
				this.over = true;
			};
			if(winner.includes('O')){
				const inds = this.windex[winner.indexOf('O')];
				inds.forEach( x => {
					this.board[x[0]][x[1]].bg = 'active';
				});
				this.over = true;
			};
			if(arr.every( x => x.every( y => y == 'X' || y == 'O' )))
				this.over = true;
		}
	},
	methods: {
		mark(box) {
			if(this.over) return
			if(box.val === ''){
				box.val = this.turn;
				this.turn = this.turn == 'X' ? 'O' : 'X';
			} else 
					alert('Invalid turn')
				this.check()
		}
	}
});

＆＃13;

@import 'https://fonts.googleapis.com/css?family=Oswald';

h1 {
	font-family: 'Oswald';
	letter-spacing: 1.5vw;
	text-align: center;
	margin:1vw;
}

table {
	margin-left: auto;
	margin-right: auto;
	border-collapse: separate;
	border-spacing: 2px;
}

.square {
	width: 100px;
	height: 100px;
	background-color: #6C7A89;
	text-align: center;
	color: white;
	cursor: pointer;
	text-align: center;
	line-height: 100px;
	font-size: 50px;
	font-family: 'Oswald';
	display: block;
}

.square:hover {
	opacity: .8;
}

td {
	vertical-align: middle;
}

.active {
	background-color: #00B16A;
}

.bounce-leave-active {
  animation: bounce-out 1.5s;
}

@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>

<div id='app'>
	<h1>TIC-TAC-TOE</h1>
	<transition name='bounce'>
	<table v-if='!over'>
		<tr v-for='row in board'>
			<td v-for='box in row'>
				<div class='square' 
						 v-bind:class='{active:box.bg}' 
						 v-on:click='mark(box)'>
					{{box.val}}
				</div>
			</td>
		</tr>
	</table>
	</transition>
</div>

＆＃13;

Answer 1

您的代码以块的形式运行;用户界面不会在您的设置active和over之间进行重新绘制，因此就UI而言，它们会同时有效地发生。 over会触发v-if绑定，因此内容不会重新粉饰，只会过渡掉。

Vue提供nextTick以允许您对事物进行排序。与setTimeout(..., 0)类似，它将您的命令从块中取出，但它确保在执行之前发生了DOM更新周期。

Vue.js无序执行的转换和效果

1 个答案: