您现在的位置是：网站首页> 编程资料编程资料

element-ui中el-input只输入数字(包括整数和小数)_vue.js_

2023-05-24 335人已围观

简介 element-ui中el-input只输入数字(包括整数和小数)_vue.js_

需求是：

  • 输入框只能输入数字，包括整数和小数

发现网上大部分文章的处理方式：

  1. 通过正则来处理输入，对其合法性进行判断校验，再将提示信息反馈给用户。体验欠佳
  2. 输入完成后进行解析，将字符串转换为数字。会导致显示的值和真实值不一致

比对一下几种方案后，最终使用的是 el-input type="number" 优化实现

代码 App.vue

依赖 package.json

{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "devDependencies": { "@vue/cli": "^5.0.4", "@vue/cli-service": "^5.0.4", "css-loader": "^6.7.1", "less": "^4.1.2", "less-loader": "^11.0.0", "style-loader": "^3.3.1", "vue-template-compiler": "^2.6.14" }, "dependencies": { "element-ui": "^2.15.8", "vue": "2" } }

入口文件 main.js

import Vue from "vue"; import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; import App from "./App.vue"; Vue.use(ElementUI); new Vue({ el: "#app", render: (h) => h(App), });

几种方式对比

方式效果
el-input可以输入数字，和字符串
el-input v-model.number可以输入数字，和字符串
el-input-number可以输入数字，和字符串
el-input type=“number”仅能输入数字（整数和小数）

总结

到此这篇关于element-ui中el-input只输入数字(包括整数和小数)的文章就介绍到这了,更多相关element-ui el-input输入数字内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：Vue Router修改query参数url参数没有变化问题及解决_vue.js_

下一篇：vue-router如何实时动态替换路由参数(地址栏参数)_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网