《Vue.js实战》数字输入框组件案例（包含练习1和练习2）

最新推荐文章于 2023-04-18 15:47:22 发布
最新推荐文章于 2023-04-18 15:47:22 发布
阅读量1.7k 收藏 12
点赞数 2
分类专栏： Vue 文章标签： Vue 数字输入框组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Corlly/article/details/99451090
版权

题目来源：《Vue.js实战》第七章 7.7.1 实战：开发一个数字输入框组件

展示效果链接：https://loaln.github.io/vue_practice/html/7-7-1.html

数字输入框组件展示效果

需求：

数字输入框只能输入数字，而且有两个快捷键按钮，可以直接减1或加1。除此之外，还可以设置初始值、最大值， 在数值改变时，触发一个自定义事件来通知父组件。

操作提示：

1、数值最小为0，最大为100；
2、输入框聚焦时，按键盘上下键可对数值进行+1和-1的操作；
3、额外设置的两个按钮可进行+10和-10的操作。

练习1：

在输入框聚焦时，增加对键盘上下键的支持，相当于加1和减1。

思路：

这里倒是很简单，直接在组件模板的input元素中绑定两个键盘事件连接 handleDown

最低0.47元/天 解锁文章
Loaln
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue输入框只能输入整数_带有vue 2增量和减量按钮的整数输入
cuk5340的博客
07-24 254
vue输入框只能输入整数 Vue整数+减号 (vue-integer-plusminus) Integer input with increment and decrement buttons. 带增量和减量按钮的整数输入。 View demo 查看演示 Download Source 下载源 全球使用 (Global use) npm install npm安装 npm install...
Vue数字输入框组件的使用方法
01-19
最近在通过《Vue.js实战》系统学习Vue，虽然在项目中已多次使用Vue进行开发，但是对于一些非常基础性的知识点还不是很了解，因此这次通过结合数字输入框组件实战来谈谈简单的组件开发。 源代码：数字输入框组件 项目整体结构 ├── src  项目代码 │ ├── common 公共js库 │ │ ├── number.js 判断是否为数字 │ ├── components 组件 │ │ ├── inputCount.vue 数字输入框组件 │ │ ├── inputNumber.vue 数字输入框调用页 | ├── router 路由 | | ├── index.js 路由相关操作 | ├─
vue开发数字输入框组件
h083417172_的博客
12-17 666
知识点 v-model双向绑定value 父组件向子组件传递数据props 解决单向数据流的问题，在子组件的data选项中声明一个currentValue，默认使用value的值 data: function() { return { currentValue: this.value, prop_step: 10 }; } watch选项监听prop或data的改变 watch: { currentValue: functio
说说如何在 Vue.js 中实现数字输入组件
weixin_33700350的博客
12-30 203
我们对普通输入框进行扩展，实现一个可快捷输入数字组件。 首先制定规则： 只能输入数字。 设计两个快捷按钮，可直接在当前值的基础上增 1 或者减 1。 数字输入组件可设置初始值、最大值与最小值。 接着，规划好 API。一个 Vue.js 组件最重要的 3 个部分就是 props、events 以及 slot，我们需要定义这三个部分的命名以及业务规则。这个组件比较简单，所以我们只用到 prop...
Vue 开发一个数字输入框组件
小柒的前端之旅
07-13 2077
前面的话 关于基础组件介绍，已经更新完了。这篇文章将用组件基础知识开发一个数字输入框组件。将涉及到指令、事件、组件间通信。 基础需求 只能输入数字 设置初始值，最大值，最小值 在输入框聚焦时，增加对键盘上下键的支持 增加一个控制步伐prop-step,例如，设置为10 ，点击加号按钮，一次增加10 项目搭建 在了解需求后，进行项目的初始化： <!DOCTYPE html> &lt...
Vue 数字输入框组件
北海之灵的博客
01-13 1447
输入框只能输入数字，并且有两个快捷按钮，可以直接加1或减1。除此之外，还可以额设置初始值、最大值、最小值、步长，在数值改变时，触发一个自定义事件来通知父组件。  在父组件中使用 &lt;template&gt; &lt;div&gt; &lt;number-box v-model="value" :max="50" :min="0" :step="2"&gt;
基于Vue的数字输入框组件开发
weixin_33749242的博客
12-19 174
1、概述 Vue组件开发的API：props、events和slots   2、组件代码 github地址：https://github.com/MengFangui/VueInputNumber 效果：     （1）index.html   &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt;...
Vue.js数字输入框组件使用方法详解
10-16
主要为大家详细介绍了Vue.js数字输入框组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
vue实战开发.快速上手.好不容易找到电子版.非PDF版
vue.js实现只能输入数字的输入框
10-16
主要为大家详细介绍了vue.js实现只能输入数字的输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
据 《Vue.js 实战》 实例 开发一个数字输入框组件
weixin_43653691的博客
11-15 345
文章目录开发一个数字输入框组件作用基本需求目录文件组成思路梳理阶段一在 index.html 中 引入input-number 组件Vue组件单向数据流问题阶段二实现父组件修改了 value currentValue 同步 使用watch进行监听 开发一个数字输入框组件 作用 数字输入框是对普通输入框的扩展，用来快捷输入一个标准的数字 基本需求 只能输入数字，而且有两个快捷按钮，可以直接减1或加1...
一个简易的数字输入框组件
前端岚枫
09-04 2534
入口 &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;input-number v-model=&amp;quot;value&amp;quot; :max=&amp;quot;10&amp;quot; :min=&amp;quot;0&amp;quot;&amp;amp;gt;&amp;amp;lt;/input-number&amp;amp;gt; &a
《Vue.js实战》章七 组件——数字输入框组件
aozhou9334的博客
06-11 421
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
《Vue.js实战》章七 组件——标签页组件：思路详解
aozhou9334的博客
06-11 315
先上带有部分注释的全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
组件开发实战-数字输入框和标签页组件
acx0000的博客
08-05 537
Vue组件学习实战练习
vue --- > vue.js实战基础篇课后练习
栗子好好吃的博客
07-02 5321
练习1:在输入框聚焦时,增加对键盘上下键按键的支持,相当于加1和减1 练习2:增加一个控制步伐的prop-step,比如设置为10,点击加号按钮,一次增加10 思路: // 考虑到子模板的复用性,即在父模板中复用如下: <input-number v-model="value" :max="10" :min="0" :step="3"></input-number> // ...
vue.js + el-table 实现键盘上下键控制聚焦行指定单元格编辑——2023/04/18 14:25:00
qq_40896145的博客
04-18 1501
利用keyup事件监听键盘事件，给待聚焦单元格绑定keyup事件，并动态绑定类名（用下标作为类名，以便后续可通过下标类名找到对应dom元素，实现聚焦）；实现键盘上下键控制聚焦到列表行某个单元格，高亮显示当前聚焦行并编辑单元格。【下键】：自动聚焦下一行，如果当前行为列表末行时，聚焦回到首行；【上键】：自动聚焦上一行，如果当前行为列表首行时，聚焦回到末行。
vue------关于slot插槽的相关问题总结：匿名、具名、作用域、解构插槽等
COCOLI_BK的博客
09-28 1603
学习之前：了解下组件基础 data必须是一个函数： 一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝； - 通过Prop向子组件传递数据 - every component must have a single root element (每个组件必须只有一个根元素)： 可以将模板的内容包裹在一个父元素内，来修复这个问题 - ...
《Vue.js实战》第7章答案
returnadsss的博客
08-19 1298
Vue2习题示例代码，选项卡
vue.js获取input输入框的值
最新发布
05-24
可以通过v-model指令来实现实时获取输入框的值，也可以使用原生的JavaScript方法来获取输入框的值。 1. 使用v-model指令 ```html <template> <div> <input type="text" v-model="inputValue" /> <button @click="getValue">获取输入框的值</button> </div> </template> <script> export default { data() { return { inputValue: "" // 初始化输入框的值为空 }; }, methods: { getValue() { console.log(this.inputValue); // 打印输入框的值 } } }; </script> ``` 2. 使用原生JavaScript方法 ```html <template> <div> <input type="text" id="inputBox" /> <button @click="getValue">获取输入框的值</button> </div> </template> <script> export default { methods: { getValue() { const inputValue = document.getElementById("inputBox").value; console.log(inputValue); // 打印输入框的值 } } }; </script> ``` 注意：在使用原生JavaScript方法获取输入框的值时，必须给输入框添加一个id属性，方便通过getElementById()方法获取。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值