vue --- vue.js实战基础篇课后练习
练习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.6.10/dist/vue.min.js"></script>
<script>Vue.component('input-number',{template:'\<div class="input-number">\<input type="text" :value="currentValue" @change="handleChange" @focus="handleFocus" @blur="handleBlur" @keyup.down="handleArrowDown" @keyup.up="handleArrowUp">\<button @click="handleDown" :disabled="currentValue <= min">-</button>\<button @click="handleUp" :disabled="currentValue >= max">+</button>\</div>',props:{max:{type:Number,default:Infinity},min:{type:Number,default:-Infinity},value:{type:Number,default:0},step:{type:Number,default:1}},data:function (){return {currentValue: this.value,isFocus:false}},methods:{handleUp:function() {this.currentValue += this.step;},handleDown:function() {this.currentValue -= this.step;},isValueNumber:function(value) {return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + '');},handleChange:function(event){let val = event.target.value.trim();let max = this.max;let min = this.min;if(this.isValueNumber(val)){val = Number(val);this.currentValue = val;if(val > max){this.currentValue = max;} else if (val < min) {this.currentValue = min;}} else {event.target.value = this.currentValue;}},updateValue:function(val){if(val > this.max) val = this.max;if(val < this.min) val = this.min;this.currentValue = val;},handleFocus:function(){this.isFocus = true},handleBlur:function(){this.isFocus = false},handleArrowDown:function(){if(this.isFocus){this.handleDown();}},handleArrowUp:function(){if(this.isFocus){this.handleUp();}}},watch:{currentValue: function(val) {this.$emit('input',val);},value: function(val){this.updateValue(val);}}})const app = new Vue({el:'#app',data:{value:5}})
</script></body>
</html>
参考《Vue.js实战》P98~P106
vue --- vue.js实战基础篇课后练习相关推荐
- vue+uni-app商城实战 | 第一篇:从0到1快捷开发一个商城微信小程序,无缝接入OAuth2实现一键授权登录
一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...
- SpringBoot2零基础到项目实战-基础篇
springboot2零基础到项目实战-基础篇 课程内容说明 课程单元 学习目标 基础篇 能够创建SpringBoot工程 基于SpringBoot实现ssm/ssmp整合 应用篇 能够掌握Sprin ...
- ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性 <%@ Page Language="C#" Auto ...
- Node.js Stream - 基础篇
背景 在构建较复杂的系统时,通常将其拆解为功能独立的若干部分.这些部分的接口遵循一定的规范,通过某种方式相连,以共同完成较复杂的任务.譬如,shell通过管道|连接各部分,其输入输出的规范是文本流. ...
- Xamarin.Forms开发实战基础篇大学霸内部资料
Xamarin.Forms开发实战基础篇大学霸内部资料 介绍:本教程是国内第一本Xamarin.Forms开发专向教程.本教程针对Xamarin.Forms初学用户,全面细致的讲解Xmarin.For ...
- Nginx实战基础篇一 源码包编译安装部署web服务器
Nginx实战基础篇一 源码包编译安装部署web服务器 版权声明: 本文遵循"署名非商业性使用相同方式共享 2.5 中国大陆"协议 您可以自由复制.发行.展览.表演.放映.广播或通 ...
- ASP.NET Google Maps Javascript API V3 实战基础篇一检测用户位置
ASP.NET Google Maps Javascript API V3 实战基础篇一检测用户位置 对于一些基本的东西,google maps JavaScript api v3 文档已经讲解得足够 ...
- Nginx实战基础篇六 通过源码包编译安装部署LNMP搭建Discuz论坛
Nginx实战基础篇六 通过源码包编译安装部署LNMP搭建Discuz论坛 版权声明: 本文遵循"署名非商业性使用相同方式共享 2.5 中国大陆"协议 您可以自由复制.发行.展览. ...
- K8S实战基础篇:一文带你深入了解K8S实战部署SpringBoot项目
K8S实战基础篇:一文带你深入了解K8S实战部署SpringBoot项目 1.前言 2.简介 2.1.为什么写这篇文章 2.2.需求描述 2.3.需求分析 3. 部署实战 3.1 环境准备 3.2 i ...
最新文章
- qt 启动画面显示图片_用QT实现软件启动画面的效果,学习参考!
- (转载)KVM is required to run this AVD /dev/kvm permission denied Ubuntu Android Studio
- 科普|数据治理如何在 Martech 中发挥效能?
- WPF入门教程系列四——Dispatcher介绍
- Windows 环境下 git 客户端中的 git-bash 和 MINGW64
- 返回路径平面上的间隙_裁切机的上刀下刀如何调整?
- aqs clh java_【Java并发编程实战】----- AQS(一):简介
- tf.Variable、tf.get_variable、tf.variable_scope以及tf.name_scope
- hdu 1261 字串数
- 计算机专业英语职高 试卷,职高对口高考英语模拟考试题.doc
- 华人小伙在美开网店卖鞋 一年销售额超八亿
- linux 开机启动项文件夹,linux开机启动项设置
- protues8.9安装【硬件课设】
- 虚幻4 - ARPG实战教程(第一季)
- 【渝粤教育】电大中专电商运营实操 作业 题库
- 农历和阳历的之间的转换
- Win7如何搜索文件内容
- javascript+css实现走马灯图片轮播器
- 椭圆算法加密,java实现
- Deep-Residual-Shrinkage-Networks模型
热门文章
- linux切换root报错,Linux用户切换到root后运行图形程序报错(*GLib-GIO-CRITICAL **)
- mysql innodb myisam 混合,MySQL MyIsam/InnoDB混合在一起的事务
- c语言函数fread的调用形式,C语言的问题,fread和fgets的区别是什么?
- 3D游戏的照明设计理论,第3部分:三点照明法的异端与误区
- php导出excel出现乱码,php导出数据到excel出现乱码的解决办法
- 受限玻尔兹曼机RBM实现及能量值思考——matlab实现
- 三心二意,助你好运?
- 构建Spring Boot程序有用的文章
- CreateProcess
- 没事写着玩 系列之 JQ连连看(很丑陋,很初级)