Vue實(shí)現(xiàn)數(shù)字輸入框中分割手機(jī)號(hào)碼的示例
更新時(shí)間：2017年10月10日 14:46:43 作者：negivup
本篇文章主要介紹了Vue實(shí)現(xiàn)數(shù)字輸入框中分割手機(jī)號(hào)碼的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
需求
在移動(dòng)端彈出系統(tǒng)數(shù)字鍵盤(pán)，輸入手機(jī)號(hào)碼的時(shí)候，使用344形式分割。
分析：
- 首先，如果要在移動(dòng)端彈出數(shù)字鍵盤(pán)，并且還可以有空格，那么就要使用type="phone"的input框
- 如果要實(shí)現(xiàn)輸入的時(shí)候增加空格，刪除的時(shí)候減少空格，那么就要使用watch
- 手機(jī)號(hào)碼為11位，加上兩個(gè)空格，最多13位，因此要限定長(zhǎng)度
代碼實(shí)現(xiàn)
<body>
<div id="app">
<!-- 類(lèi)型為phone，最大長(zhǎng)度為13 -->
<input type="phone" v-model="dataPhone" maxlength="13">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
dataPhone: ''
}
},
watch: {
// 通過(guò)watch來(lái)設(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue router嵌套路由在history模式下刷新無(wú)法渲染頁(yè)面問(wèn)題的解決方法
這篇文章主要介紹了vue router嵌套路由在history模式下刷新無(wú)法渲染頁(yè)面問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要為大家詳細(xì)介紹了Vue生命周期和數(shù)據(jù)共享，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
在本篇文章里小編給大家整理的是一篇關(guān)于Vue3.0的優(yōu)化總結(jié)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2020-10-10
vue中的虛擬dom知識(shí)點(diǎn)總結(jié)
這篇文章主要介紹了vue中的虛擬dom知識(shí)點(diǎn)總結(jié)，文章圍繞主題內(nèi)容展開(kāi)詳細(xì)介紹，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-04-04
Vue不能檢測(cè)到Object/Array更新的情況的解決
本篇文章主要介紹了Vue不能檢測(cè)到Object/Array更新的情況的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要介紹了解決Vue-cli無(wú)法編譯es6的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
幫助我們高效操作的Virtual?DOM簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要為大家介紹了幫助我們高效操作Virtual?DOM簡(jiǎn)單實(shí)現(xiàn)及原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的4種方法舉例
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的4種方法,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue覺(jué)有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了使用vue制作滑動(dòng)標(biāo)簽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
本文章向大家介紹vue組件中的數(shù)據(jù)共享，主要包括vue組件中的數(shù)據(jù)共享使用實(shí)例、應(yīng)用技巧、基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-11-11