仅允许用户使用Vue在文本框中输入currency等值.js

推荐答案

工作示例:https://jsfiddle.net/0s14cbqx/

在模板中:

<input placeholder="Name a price" v-model="price" @keypress="onlyForCurrency">

在js中:

data(){
   return{
     price:null
   }
},
methods: {
   onlyForCurrency ($event) {
     // console.log($event.keyCode); //keyCodes value
     let keyCode = ($event.keyCode ? $event.keyCode : $event.which);

     // only allow number and one dot
     if ((keyCode < 48 || keyCode > 57) && (keyCode !== 46 || this.price.indexOf('.') != -1)) { // 46 is dot
      $event.preventDefault();
     }

     // restrict to 2 decimal places
     if(this.price!=null && this.price.indexOf(".")>-1 && (this.price.split('.')[1].length > 1)){
     $event.preventDefault();
     }
   }
}

这样,用户只能输入数字和一个点,不能输入小数点后2位的任何内容.

Vue.js相关问答推荐

为什么 Pinia/Vuex 比使用服务类的classic 方法更受欢迎?

有没有办法将react 键作为值传递给由 v-for 创建的 v-model

vuetify/mdi 不显示图标

vue js导航到带有问号的url

如何在 vuejs 自定义指令中传递动态参数

vuetifyjs:仅添加使用过的图标来构建

如何在 vue.js 中删除类

apache上的Vue-router,子目录下的SPA,只能通过重定向访问页面

如何在 Vue.js 中触发点击 ref

Vue.js 从模板中分离样式

如何打破 vue.js 中的 v-for 循环?

我在 Nuxt 2.14.0 中运行的是什么版本的 Vue?

Vue 动态组件事件绑定

无法访问数据对象的嵌套属性

Vue Cli 3 不允许我在 Webpack 中处理 SVG

从 ajax 调用填充 Vue.js 中的下拉列表

使用 Vue.js 获取所有选中复选框的列表

脚本npm run dev和npm run watch是做什么用的?

Vue 2.0 设置路由 - 不要使用new来产生副作用

Vuex Mutation 正在运行,但组件在 vue 开发工具中手动提交之前不会更新