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