Vue實(shí)現(xiàn)數(shù)字輸入框中分割手機(jī)號碼的示例
更新時(shí)間:2017年10月10日 14:46:43 作者:negivup
本篇文章主要介紹了Vue實(shí)現(xiàn)數(shù)字輸入框中分割手機(jī)號碼的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
需求
在移動端彈出系統(tǒng)數(shù)字鍵盤,輸入手機(jī)號碼的時(shí)候,使用344形式分割。
分析:
- 首先,如果要在移動端彈出數(shù)字鍵盤,并且還可以有空格,那么就要使用type="phone"的input框
- 如果要實(shí)現(xiàn)輸入的時(shí)候增加空格,刪除的時(shí)候減少空格,那么就要使用watch
- 手機(jī)號碼為11位,加上兩個(gè)空格,最多13位,因此要限定長度
代碼實(shí)現(xiàn)
<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來設(shè)置空格 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue router嵌套路由在history模式下刷新無法渲染頁面問題的解決方法
這篇文章主要介紹了vue router嵌套路由在history模式下刷新無法渲染頁面問題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01幫助我們高效操作的Virtual?DOM簡單實(shí)現(xiàn)
這篇文章主要為大家介紹了幫助我們高效操作Virtual?DOM簡單實(shí)現(xiàn)及原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06vue實(shí)現(xiàn)簡易計(jì)算器的4種方法舉例
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)簡易計(jì)算器的4種方法,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue覺有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09