《Vue.js实战》一书 p117 练习 1& 2 (2019.12.19)

Posted 2021-03-22 sx00xs

（最近学了下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;
    },