SOURCE

new Vue({
	el:'#app',
	data:{
		value: 0,
		nums:'',
		req: '请输入一个数字'
	},
	computed: {
		result: function() {
			return this.value < this.nums ? '这个数太小了' : this.value > this.nums ? '这个数太大了' : '选对了'
		},
		show:function() {
			return this.nums.length > 0 ? 'none' : 'block'
		}
	},
	methods:{
		num:function(event) {
			this.nums = event.target.value
		},
		restart:function() {
			this.value = 0;
			this.nums = ''
		}
	},
	watch: {
		value: function() {
			this.value < 0 ? this.value = 0 : ''
		}
	}
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id='app'>
	<div>
		<input type="text" @keydown.enter='num' :value='nums' :placeholder='req' :style='{display: show}'>
		<p v-if='nums.length > 0'>已输入</p>
		<p>当前数值：{{ value }}</p>
		<input type="text" :value='value' @keydown.enter="value = parseInt($event.target.value)"><br>
		<button @click='value += 5'>加 5</button>
		<button @click='value += 1'>加 1</button>
		<button @click='value -= 5'>减 5</button>
		<button @click='value -= 1'>减 1</button>
		<p>{{ result }}</p>
		<button @click='restart'>再来一局</button>
	</div>
</div>