watch 中的监听函数，有两个入参，第一个是新值，第二个是旧值。这里只用到新值。因为监听函数中的 this ，指向的是当前组件实例，所以可以直接调用定义在 methods 中的函数。
为了在组件初始化时，对初始值进行范围限定，这里在 mounted 挂载函数中，也调用了 update() 函数。
效果：
2 按键支持
当输入框获得焦点时，按下“向上键”时，增长；按下“向上键”时，减少。
这可以利用按键修饰符来实现，我们修改示例中的组件模板：
... <input type="text" :value="currentVal" @change="change" @keyup.up="up" @keyup.down="down"> ...
Vue.js 定义按键别名有这些：
.enter
.tab
.delete(捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
效果：
3 控制步伐
新增一个步伐属性，增长或者减少以步伐值为变化量。之前的示例，步伐为 1。
首先在 props 中，定义一个步伐属性：
//步伐 step: { type: Number, default: 1 }
然后在增长与减少函数中，使用步伐属性做为变化量：
/** * 减少 */ down: function () { if (this.currentVal <= this.min) { return; } this.currentVal -= this.step; }, /** * 增长 */ up: function () { if (this.currentVal >= this.max) { return; } this.currentVal += this.step; },
最后为组件重新配置参数：
<number-input v-model="value" :min="0" :max="50" :step="5"></number-input>
效果：
