JSFiddle - React, Tailwind, and code Playground

by cheongjin kim

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<button onClick="start(false);">nextTick 미사용</button><button onClick="start(true);">nextTick 사용</button>
<div id="app">
	<div v-for="item in list">
		<div v-bind:id="bindId(item)">{{item}}</div>
	</div>
</div>

<script>
var start;
</script>

CSS

button {
	outline:none;
	background-color:white;
	border:1px solid #6495ED;
	color:#6495ED;
	border-radius:10px;
	padding:5px 10px;
	margin:5px;
}
button:hover {
	background-color: #6495ED;
	color:white;
	cursor:pointer;
}

JavaScript

start = function(isNextTick) {
	new Vue({
		el : '#app',
		data : function() {
			return {
				list : []
			};
		},
		created : function() {

			var self = this;

			for(var i=0; i<100; i++) {
				this._data.list.push(i);
			}

			if(isNextTick) {
				this.$nextTick(function() {
					var dom = document.getElementById('item-0');
					dom.style.backgroundColor = 'red';
				});
			} else {
				var dom = document.getElementById('item-0');
				dom.style.backgroundColor = 'red';
			}
		},
		methods : {
			bindId : function(item) {
				return 'item-' + item;
			}
		}
	})
}