《vue.js实战》练习---数字输入框组件
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字输入框</title>
</head>
<body>
<div id="app">
<input-number v-model="value" :max="10" :min="0" :step="1"></input-number>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="input-number.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
value: 5
}
})
</script>
</body>
</html>
input-number.js:
function isValueNumber(value){
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+'');
}
Vue.component('input-number',{
template: '<div class="input-number"><input type="text" :value="current" @change="inputChange" @keyup.up="reduce" @keyup.down="increase"><button @click="reduce" :disabled="current <= min">-</button><button @click="increase" :disabled="current >= max">+</button></div>',
props: {
value: {
type: Number,
default: 0
},
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
step: {
type: Number,
default: 10
}
},
data: function () {
return {
current: this.value
}
},
methods: {
reduce: function () {
this.current --;
},
increase: function () {
this.current +=this.step;
},
inputChange: function (event) {
var val = event.target.value.trim();
if(isValueNumber(val)){
val = Number(val);
this.updataValue(val);
}else{
event.target.value = this.currentValue;
}
},
updataValue: function (val) {
if(val >= this.max){
val = this.max;
}else if(val <= this.min){
val = this.min;
}
this.current = val;
}
},
watch: {
current: function (val) {
this.$emit('input',val);
},
value: function (val) {
this.updataValue(val);
}
}
})效果：
《vue.js实战》练习---数字输入框组件的更多相关文章
- 基于Vue的数字输入框组件开发
1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- [Input-number]数字输入框组件
需求 加.减按钮 初始值 最大.最小值 数值改变时,触发一个自定义事件来通知父组件 目录文件 index.html 入口页 input-number.js 数字输入框组件 index.js 根实例 实 ...
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- vue.js入门（3）——组件通信
5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...
- Vue.js 实战总结
最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...
- MUI 里js动态添加数字输入框后，增加、减少按钮无效
numbox 的自动初化是在 mui.ready 时完成的mui 页面默认会自动初始化页面中的所有数字输入框,动态构造的 DOM 需要进行手动初始化.比如:您动态创建了一个 ID 为 abc 的数字输 ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
随机推荐
- springmvc+spring-data-jpa+hibernate环境搭建与配置
1.JPA诞生的缘由是为了整合第三方ORM框架,建立一种标准的方式,百度百科说是JDK为了实现ORM的天下归一,目前也是在按照这个方向发展,但是还没能完全实现.在ORM框架中,Hibernate是一支 ...
- 史上最全的PHP正则表达式
首先看下正则表达式思维导图: 一.校验数字的表达式 1 数字:^[0-9]*$2 n位的数字:^\d{n}$3 至少n位的数字:^\d{n,}$4 m-n位的数字:^\d{m,n}$5 零和非零开头 ...
- python内置模块[sys,os,os.path,stat]
python内置模块[sys,os,os.path,stat] 内置模块是python自带功能,在使用内置模块时,需要遵循 先导入在 使用 一.sys 对象 描述 sys.argv 命令行参数获取,返 ...
- 【C#】 RBAC 权限框架
[C#] RBAC 权限框架 一. 名词解释 1. 用户 : 登录的账号, 和角色挂钩,可拥有多个角色 2. 角色 : 账号所属的角色, 和权限挂钩,可拥有多个权限 3. 权限 : 角色拥有的操作权限 ...
- ASP.NET Web API 2 返回 Json格式
最近在学习ASP.NET的Web API,刚刚开始以为会有些复杂,结果却非常简单. 学习的地址:http://www.asp.net/web-api/overview/getting-started- ...
- vue2.0 watch
类型:string | Function | Object vue官网解释: 一个对象,键是需要观察的表达式,值是对应回调函数.值也可以是方法名,或者包含选项的对象.Vue 实例将会在实例化时调用 $ ...
- App测试基本流程详解
1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试时间. 1.3测试资 ...
- windows本地连接腾讯云的mysql服务器
由于最近数据库需要用上Navicat作为数据库,但是我的mysql装在腾讯云的Ubuntu上,因此需要做些配置开放端口,和监听端口,因此略显麻烦,这里记录一下连接的具体步骤,方便以后又得装(flag) ...
- 无法注册DLL/OCX:regsvr32 failed with exit code 0x5
最近在服务器上装一个等值线控件,确报错: RegSvr32 failed with exit code 0x5 尝试解决方法1: 在cmd下 运行for %1 in (%windir%\syste ...
- 并查集——poj2492（带权并查集入门）
一.题目回顾 题目链接:传送门 题意:给定n只虫子,不同性别的可以在一起,相同性别的不能在一起.给你m对虫子,判断中间有没有同性别在一起的. 二.解题思路 种类并查集 和poj1073的本质一样 详见 ...