問(wèn)題描述

這是移動(dòng)端使用的， input type 為number 時(shí) 英文或中文都沒(méi)有限制，而且maxlength不起作用，input type 為tel 時(shí) 英文或中文也都沒(méi)有限制，但maxlength有作用，所以用tel，keyup 是為了過(guò)濾數(shù)字以外的字符。請(qǐng)問(wèn)大神這段代碼還有沒(méi)有優(yōu)化的空間？

<input v-model='phoneNumber' placeholder='輸入手機(jī)號(hào)' type='tel' maxlength='11' @keyup='handleFilterLetters'><script type='text/javascript'> vm = new Vue({ el: '#app', data: {phoneNumber: null, }, methods: {handleFilterLetters: function(){ var self = this; self.phoneNumber=self.phoneNumber.replace(/[^d]/g,’’);}, }})</script>

問(wèn)題解答

phoneNumber 初始值應(yīng)該是字符串的 ’’，否則對(duì)一個(gè)可能為 null 的變量調(diào)用 replace 是不安全的。

var self = this 是不必要的。

handleFilterLetters 好長(zhǎng)啊，改成 onKeyUp 不好讀一點(diǎn)嗎（

<input> 一行寫的太長(zhǎng)了，eslint-airbnb 的規(guī)則是

<input v-model='phoneNumber' placeholder='輸入手機(jī)號(hào)' type='tel' maxlength='11' @keyup='handleFilterLetters'/>回答2：

樓上說(shuō)的都對(duì)題主還可以多注意一下 code style 比如：self.phoneNumber=self.phoneNumber.replace(/[^d]/g,’’);

寫成self.phoneNumber = self.phoneNumber.replace(/[^d]/g,’’);

比較好

這里用的局部filter

如果想可復(fù)用程度高點(diǎn)，全局filter也可以的

<p > <input :value='phone | num' @keyup='phoneChange' /></p>

var app = new Vue({ el: '#app', data: { phone: '' }, methods: { phoneChange(e) { this.phone = e.target.value this.$forceUpdate() // 這里必須有 } }, filters: { ’num’: function(value) { return value.replace(/[^d]/g, ’’) } }})