(最近学了下 angular 的教程, 又回过头来看 vue.js 实战一书...)
练习 1 : 在输入框聚焦时, 增加对键盘上下按键的支持, 相当于加 1 和减 1
练习 2 : 增加一个控制步伐的 prop--step, 比如设置为 10 , 点击加号按钮, 一次增加 10 .
ps: 只添加了少量代码, 即完成了此 2 练习!
-----------------------------------------------------------------------------------------------------------------------
练习 1 解析: 在组件 inputNumber 中的 inputh , 添加监听了 keyup 事件, 并附加了修饰符 up / down, 调用监听函数 handleUp/handleDown
- @keyup.up="handleUp"
- @keyup.down="handleDown"
练习 1 解析:
父组件中, 给子组件传入一个 step 特性, 值为 10
<input-number v-model="value" :max="100" :min="0" :step="10"></input-number>
子组件 inputNumber 中, props 中添加 step
- step:{
- type:Number,
- default:10
- }
修改 handleUp 函数如下:
- handleUp(){
- if(this.currentValue>= this.max) return;
- this.currentValue += this.step;
- },
来源: http://www.bubuko.com/infodetail-3340309.html