SOURCE

console 命令行工具 X clear

                    
>
console
function isValueNumber(value) {
  return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9]*$)|(^-?0{1}$)/).test(value + '');
}

Vue.component('input-number', {
  template: '<div class="input-number"><input type="text" \
  :value="currentValue" \
  @change="handleChange" \
	@keyup.up="handleUp" \
	@keyup.down="handleDown" \
  > \
		<button \
  			@click="handleDown" \
  			:disabled="currentValue <= min">-</button> \
  		<button \
  			@click="handleUp" \
  			:disabled="currentValue >= max">+</button> \
		</div>',
  props: {
  	max: {
  		type: Number,
  		default: Infinity
		},
    min: {
      type: Number,
      default: -Infinity
    },
    step: {
      type: Number,
      default: 20
    },          
    value: {
	  	type: Number,
      default: 0
    }
	},
  data:  function() {
  		return {
        currentValue: this.value
      }
	},
  watch: {
    currentValue: function(val) {
      this.$emit('input', val);
      this.$emit('on-change', val);
    },
    value: function(val) {
      this.updateValue(val);
    }
  },
  methods: {
    handleDown: function() {
      if(this.currentValue <= this.min) return;
      this.currentValue -= this.step;
    },
   handleUp: function() {
    if(this.currentValue >= this.max) return;
    this.currentValue += this.step;
  }, 
  updateValue: function(val) {
    if(val > this.max) val = this.max;
    if(val < this.min) val = this.min;
    this.currentValue = val;
  },
  handleChange: function(event) {
    var val = event.target.value.trim();
    
    var max = this.max;
    var min = this.min;
    
    if(isValueNumber(val)) {
       val = Number(val);
       this.currentValue = val;
       
       if(val > max) {
     		 this.currentValue = max;
   		 } else if(val < min) {
      		this.currentValue = min;
    		}
   } else {
     event.target.value = this.currentValue;
   }
  }
  },
  mounted: function() {
    this.updateValue(this.value);
  }
});

var app = new Vue({
	  el: '#app',
	  data: {
    	value: 5
 	 }
});
<div id="app">
  <input-number v-model="value" :max="100" :min="0" :step="20"></input-number>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>