<h3 id="articleHeader0">抛砖引玉——上代码</h3> <h5>首先想到在input事件中正则匹配一下,但是,在输入错误格式或非数字的情况下,会将整个输入框清空,体验很不好:</h5> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template><br /> <input placeholder=&quot;限制小数点后两位&quot; type=&quot;text&quot; v-model=&quot;count&quot; @input=&quot;scope.row.count=/^d+.?d{0,2}$/.test(count)||count == '' ? count : count=''&quot;><br /> </template><br /> <script> data() { return { count: 0 } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"限制小数点后两位"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"count"</span> @<span class="hljs-attr">input</span>=<span class="hljs-string">"scope.row.count=/^d+.?d{0,2}$/.test(count)||count == '' ? count : count=''"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> data() { <span class="hljs-keyword">return</span> { count: <span class="hljs-number">0</span> } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h5>然后我就加了一个字段,在keyup事件中赋值,然后匹配:</h5> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template><br /> <input placeholder=&quot;限制小数点后两位&quot; type=&quot;text&quot; v-model=&quot;count&quot; @keydown=&quot;checkKeydown($event, count)&quot; @input=&quot;scope.row.count=/^d+.?d{0,2}$/.test(count)||count == '' ? count : count=checkValue&quot;><br /> </template><br /> <script> data() { return { count: '', checkValue: '' } }, methods: { checkKeydown(e, value){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.checkValue = value; } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"限制小数点后两位"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"count"</span> @<span class="hljs-attr">keydown</span>=<span class="hljs-string">"checkKeydown($event, count)"</span> @<span class="hljs-attr">input</span>=<span class="hljs-string">"scope.row.count=/^d+.?d{0,2}$/.test(count)||count == '' ? count : count=checkValue"</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> data() { <span class="hljs-keyword">return</span> { count: <span class="hljs-string">''</span>, checkValue: <span class="hljs-string">''</span> } }, methods: { checkKeydown(e, value){ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.checkValue = value; } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h5>这样已经可以实现需求了,不过体验上还是有一点怪,在输入不匹配时光标会闪动,最佳的体验应该是在keyup中将不匹配的按键直接return,不过这样需要额外判断一下backspace、de<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>e、——&gt;、&lt;——等,不知各位大佬是怎么实现的,欢迎评论!!</h5> <blockquote><p>附:关于input的都可以交流呀</p></blockquote>

本文固定链接: http://www.js-code.com/vue-js/vue-js_16309.html