拋磚引玉——上代碼

首先想到在input事件中正則匹配一下，但是，在輸入錯誤格式或非數字的情況下，會將整個輸入框清空，體驗很不好：

<template><input placeholder="限制小數點后兩位" type="text" v-model="count" @input="scope.row.count=/^\d+\.?\d{0,2}$/.test(count)||count == '' ? count : count=''"> </template> <script>data() {return {count: 0}} </script>

然后我就加了一個字段，在keyup事件中賦值，然后匹配：

<template><input placeholder="限制小數點后兩位" type="text" v-model="count" @keydown="checkKeydown($event, count)"@input="scope.row.count=/^\d+\.?\d{0,2}$/.test(count)||count == '' ? count : count=checkValue"> </template> <script>data() {return {count: '',checkValue: ''}},methods: {checkKeydown(e, value){this.checkValue = value;}} </script>

這樣已經可以實現需求了，不過體驗上還是有一點怪，在輸入不匹配時光標會閃動，最佳的體驗應該是在keyup中將不匹配的按鍵直接return，不過這樣需要額外判斷一下backspace、delete、——>、<——等，不知各位大佬是怎么實現的，歡迎評論！！

附：關于input的都可以交流呀

總結

以上是生活随笔為你收集整理的input限制输入小数点后两位（vue版本）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。