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)文章
在本篇內(nèi)容中小編給大家分享了關(guān)于Vue中使用canvas方法和步驟，對(duì)此有需要的讀者們參考學(xué)習(xí)下。2019-02-02
最近有個(gè)需求，一個(gè)列表上下移動(dòng)要有簡(jiǎn)單過(guò)渡效果。本文通過(guò)實(shí)例代碼給大家介紹Vue 列表上下過(guò)渡效果,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)文件批量打包壓縮下載功能，文中的實(shí)現(xiàn)步驟講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2022-07-07
vue中keep-alive組件使用和一些基礎(chǔ)配置方法
本文主要介紹了Vue中keep-alive組件的使用方法和一些基礎(chǔ)配置,keep-alive是Vue中的一個(gè)抽象組件,可以緩存組件實(shí)例,提高性能,本文給大家介紹vue中keep-alive組件使用和一些基礎(chǔ)配置方法,感興趣的朋友一起看看吧2024-10-10
本文通過(guò)實(shí)例代碼給大家介紹了vue 中swiper的使用，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
詳解用vue.js和laravel實(shí)現(xiàn)微信支付
本篇文章主要介紹了用vue.js和laravel實(shí)現(xiàn)微信支付，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
vue的異步數(shù)據(jù)更新機(jī)制與$nextTick用法解讀
這篇文章主要介紹了vue的異步數(shù)據(jù)更新機(jī)制與$nextTick用法解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue-resource:jsonp請(qǐng)求百度搜索的接口示例
今天小編就為大家分享一篇vue-resource:jsonp請(qǐng)求百度搜索的接口示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
解決vue使用vant下拉框van-dropdown-item 綁定title值不變問(wèn)題
這篇文章主要介紹了解決vue使用vant下拉框van-dropdown-item 綁定title值不變問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue + element-ui實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能
Element-UI是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,手機(jī)端有對(duì)應(yīng)框架是 Mint UI，下面這篇文章主要給大家介紹了關(guān)于利用vue + element-ui如何實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能的相關(guān)資料，需要的朋友可以參考下。2017-12-12