需求
在移動端彈出系統數字鍵盤,輸入手機號碼的時候,使用344形式分割。
分析:
代碼實現
<body> <div id="app"> <!-- 類型為phone,最大長度為13 --> <input type="phone" v-model="dataPhone" maxlength="13"> </div></body><script> var vm = new Vue({ el: '#app', data() { return { dataPhone: '' } }, watch: { // 通過watch來設置空格 dataPhone(newValue, oldValue) { if (newValue.length > oldValue.length) { // 文本框中輸入 if (newValue.length === 3 || newValue.length === 8) { this.dataPhone += ' ' } } else { // 文本框中刪除 if (newValue.length === 9 || newValue.length === 4) { this.dataPhone = this.dataPhone.trim() } } } } })</script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答