javascript - vue 移動(dòng)端的input 數(shù)字輸入優(yōu)化
問(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)題解答
回答1: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,’’);
比較好
回答3:這里用的局部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, ’’) } }})
相關(guān)文章:
1. node.js - mysql如何通過(guò)knex查詢今天和七天內(nèi)的匯總數(shù)據(jù)2. mysql 插入數(shù)值到特定的列一直失敗3. 360瀏覽器與IE瀏覽器有何區(qū)別???4. Python從URL中提取域名5. mysql - 百萬(wàn)行的表中是否盡量避免使用update等sql語(yǔ)句?6. python - 在使用Pycharm時(shí)經(jīng)常看到如下的樣式,小括號(hào)里紅色的部分是什么意思呢?7. javascript - 新浪微博網(wǎng)頁(yè)版的字?jǐn)?shù)限制是怎么做的8. 怎么在網(wǎng)頁(yè)中設(shè)置圖片進(jìn)行左右滑動(dòng)9. javascript - 豆瓣的這個(gè)自適應(yīng)是怎么做的?10. javascript - 用jsonp抓取qq音樂(lè)總是說(shuō)回調(diào)函數(shù)沒(méi)有定義
