拋磚引玉——上代碼

首先想到在input事件中正則匹配一下，但是，在輸入錯(cuò)誤格式或非數(shù)字的情況下，會(huì)將整個(gè)輸入框清空，體驗(yàn)很不好：

<template><input placeholder="限制小數(shù)點(diǎn)后兩位" 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>

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

<template><input placeholder="限制小數(shù)點(diǎn)后兩位" 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>

這樣已經(jīng)可以實(shí)現(xiàn)需求了，不過體驗(yàn)上還是有一點(diǎn)怪，在輸入不匹配時(shí)光標(biāo)會(huì)閃動(dòng)，最佳的體驗(yàn)應(yīng)該是在keyup中將不匹配的按鍵直接return，不過這樣需要額外判斷一下backspace、delete、——>、<——等，不知各位大佬是怎么實(shí)現(xiàn)的，歡迎評(píng)論！！

附：關(guān)于input的都可以交流呀

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。