记一次el-input使用的坑

记一次el-input使用的坑

el-input使用不同与原生input,所以在vue中改变绑定的数据时需注意

<el-input v-model="form.schedule" @input="validateNumber($event)" />

要想在input时改变form.schedule的值来改变输入框显示的值,以下方法是做不到的

//只可以输入1-7之间的数字
validateNumber(value) {if (!/[^1-7]/.test(value)) {this.form.schedule = value;} else {this.form.schedule = value.substring(0, value.length - 1);}
}

虽然改变了form.schedule的值,但是输入框显示的内容只会改变一次,然后显示的值与绑定的值无关,即输入什么显示什么,不再显示form.schedule的值

需要使用 this.$nextTick()
//驗證班期的有效輸入
validateNumber(value) {if (!/[^1-7]/.test(value)) {this.$nextTick(() => {this.form.schedule = value;});} else {this.$nextTick(() => {this.form.schedule = value.substring(0, value.length - 1);});}
}

搞定!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247560.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用pm2启动Node和Vue项目教程

安装pm2 $ npm install -g pm2 命令行全局安装pm2 将pm2加入到命令中去?1234ln -s /usr/local/src/node-v8.9.1-linux-x64/bin/pm2 /usr/local/bin/pm2ln -s /usr/local/src/node-v8.9.1-linux-x64/bin/pm2-dev /usr/local/bin/pm2-devln -s /usr/local/src/node-v8.9.1-lin…

对正则的研究

视频链接地址&#xff08;视频格式可按需增删&#xff09; /^https?:\/\/.*?(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4)$/i 图片链接地址&#xff08;图片格式可按需增删&#xff09; /^https?:\/\/.*?(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif)$/i 24小时制时间&a…

MVVM原理还你

众所周知当下是MVVM盛行的时代&#xff0c;从早期的Angular到现在的React和Vue&#xff0c;再从最初的三分天下到现在的两虎相争。 无疑不给我们的开发带来了一种前所未有的新体验&#xff0c;告别了操作DOM的思维&#xff0c;换上了数据驱动页面的思想&#xff0c;果然时代的进…

poj1316

1&#xff0e;链接地址 https://vjudge.net/problem/POJ-1316 2&#xff0e;问题描述 In 1949 the Indian mathematician D.R. Kaprekar discovered a class of numbers called self-numbers. For any positive integer n, define d(n) to be n plus the sum of the digits of …

CSS页面布局解决方案大全

前端布局非常重要的一环就是页面框架的搭建&#xff0c;也是最基础的一环。在页面框架的搭建之中&#xff0c;又有居中布局、多列布局以及全局布局&#xff0c;今天我们就来总结总结前端干货中的CSS布局。 居中布局 水平居中 1&#xff09;使用inline-blocktext-align&#xff…

AES加密算法的学习笔记

AES简介高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。 对称加密算法也就是加密和解密用相同的密钥&#xff0c;具体的加密流程如下图&#xff1a; 下面简单介绍下各个部分的作用与意义&#xff1a; 明文P没…

为什么要用setTimeout模拟setInterval ?

setInterval有两个缺点&#xff1a; 使用setInterval时&#xff0c;某些间隔会被跳过&#xff1b;可能多个定时器会连续执行&#xff1b;在前一个定时器执行完前&#xff0c;不会向队列插入新的定时器&#xff08;解决缺点一&#xff09;保证定时器间隔&#xff08;解决缺点二&…

前端 crypto-js aes 加解密

背景 前段时间公司做项目&#xff0c;该项目涉及到的敏感数据比较多&#xff0c;经过的一波讨论之后&#xff0c;决定前后端进行接口加密处理&#xff0c;采用的是 AES BASE64 算法加密~ 网上关于 AES 对称加密的算法介绍看上一篇&#xff01; 具体实现 其实搞懂了是怎么一回事…

对排序算法的研究

算法是什么&#xff1f;、 算法&#xff08;Algorithm&#xff09; 代表着用系统的方法描述解决问题的策略机制&#xff0c;可以通过一定规范的 输入&#xff0c;在有限时间内获得所需要的 输出。 一个算法的好坏是通过 时间复杂度 与 空间复杂度 来衡量的。 简单来说&#xff…

js实用算法

判断文本是否为回文 定义&#xff1a;如果将一个文本翻转过来&#xff0c;能和原文本完全相等&#xff0c;那么就可以称之为“回文”。 方法一&#xff08;字符串、数组内置方法&#xff09;123456789101112131415/** 判断文字是否为回文* param {string|number} val 需要判断的…

stylus

stylus格式 指将css中{} &#xff1b;去掉即可

随笔记录(2019.7.10)

1、ISO/OSI 网络七层参考模型 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层 2、 TCP/IP 网络四层模型和五层模型 四层模型&#xff1a; 网络接口层 网络层 传输层 应用层 五层模型&#xff1a; 物理层 数据链路层 网络层 传输层 应用层 3、 协议簇 &#xff08;1&a…

转发:Ajax动态画EChart图表

本人由于项目需要&#xff0c;在状态变化的时候需要动态绘制对应数据的EChart图表&#xff0c;并且不刷新整个网页。 所以就用Ajax动态画EChart图表&#xff0c;下面是开发过程中遇到的一些坑的总结。 流程&#xff1a;页面首次加载时展示一幅原始的图形&#xff0c;若后台数据…

如果硬盘不显示可以这么处理

http://www.zhuangjiba.com/soft/9574.html转载于:https://www.cnblogs.com/braveheart007/p/11167311.html

Highcharts的饼图大小的控制

在Highcharts中&#xff0c;饼图的大小是Highcharts自动计算并进行绘制。饼图的大小受数据标签大小、数据标签到切片的距离影响。当数据标签内容较多&#xff0c;并且距离切片较远时&#xff0c;饼图就会被压缩的很小。解决这个问题&#xff0c;有以下几种方法&#xff1a;&…

转:谷歌离线地图基础

一.需要文件 gapi3文件夹&#xff1a;存放接口等tilemap文件夹&#xff1a;存放图片gapi.js文件maptool.js文件 二.html配置 <script type"text/javascript" src"gapi.js"></script> <script type"text/javascript" src"map…

HTTP Header 详解

搜集资料 HTTP&#xff08;HyperTextTransferProtocol&#xff09;即超文本传输协议&#xff0c;目前网页传输的的通用协议。HTTP协议采用了请求/响应模型&#xff0c;浏览器或其他客户端发出请求&#xff0c;服务器给与响应。就整个网络资源传输而言&#xff0c;包括message-h…

Windows CE 6.0中断处理过程(转载)

这里我们主要讨论的是CE的中断建立和中断相应的大概流程以及所涉及的代码位置。这里所讲述的&#xff0c;是针对ARM平台的。在CE的中断处理里面&#xff0c;有一部分工作是CE Kernel完成的&#xff0c;有一部分工作是要由OEM完成的。 Kernel代码工作 ExVector.s&#xff1a;中断…

document.createDocumentFragment 以及创建节点速度比较

document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象。 DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段&#xff0c;将元素附加到文档片段&#xff0c;然后将文档片段附加到DOM树。…

Javascript重温OOP之原型与原型链

prototype原型对象 每个函数都有一个默认的prototype属性&#xff0c;其实际上还是一个对象&#xff0c;如果被用在继承中&#xff0c;姑且叫做原型对象。 在构造函数中的prototype中定义的属性和方法&#xff0c;会被创建的对象所继承下来。举个栗子&#xff1a; function F()…