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

Posted sx00xs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《Vue.js实战》一书 p117 练习 1& 2 (2019.12.19)相关的知识,希望对你有一定的参考价值。

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

 

以上是关于《Vue.js实战》一书 p117 练习 1& 2 (2019.12.19)的主要内容,如果未能解决你的问题,请参考以下文章

2019.8.27更新:《Vue.js实战一书p231练习试做

vue.js实战——购物车练习(包含全选功能)

《Vue.j实战》一书 p171 练习 2 试做

Vue 3最新力作 Vue.js 3企业级应用开发实战

Vue.js起手式+Vue小作品实战

Vue.js起手式+Vue小作品实战