vue --- > vue.js实战基础篇课后练习

最新推荐文章于 2024-04-10 11:01:00 发布

VIP文章栗子好好吃

最新推荐文章于 2024-04-10 11:01:00 发布

阅读量5.1k

点赞数

分类专栏： Vue 文章标签：组件之间的传递

本文链接：https://blog.csdn.net/piano9425/article/details/94491098

版权

练习1:在输入框聚焦时,增加对键盘上下键按键的支持,相当于加1和减1
练习2:增加一个控制步伐的prop-step,比如设置为10,点击加号按钮,一次增加10

思路:

// 考虑到子模板的复用性,即在父模板中复用如下:
<input-number v-model="value" :max="10" :min="0" :step="3"></input-number>
// v-model将input中的值和父模板data下面value的值绑定到一起
// 可以通过:max,:min限制输入框的最大最小值
// 通过:step来设置子模版点击加号时的步伐(即,一次加多少)

几个补充:
@focus: 用于绑定input的聚焦事件
@blur: 用于绑定input的失去焦点事件
@keyup.down: 绑定键盘的向下键
@keyup.up: 绑定键盘的向上键

总体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
    <div id="app">
        <input-number v-model="value" :max="10" :min="0" :step="3"></input-number>
    </div>

<script src="https://unpkg.com/vue@2

最低0.47元/天解锁文章

栗子好好吃

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue --- > vue.js实战基础篇课后练习

练习1:在输入框聚焦时,增加对键盘上下键按键的支持,相当于加1和减1练习2:增加一个控制步伐的prop-step,比如设置为10,点击加号按钮,一次增加10思路:// 考虑到子模板的复用性,即在父模板中复用如下:<input-number v-model="value" :max="10" :min="0" :step="3"></input-number>// ...
复制链接

扫一扫