이번 글에서는 Vue가 숫자 입력창에 휴대폰 번호 분할을 구현한 사례를 주로 소개하고 있는데, 에디터가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
Requirements
모바일 단말기에 시스템 숫자 키보드가 뜨고 휴대폰 번호를 입력할 때 344 형식 분할을 사용하세요.
분석:
우선 모바일 단말기에 숫자 키보드를 띄우고 싶으면, 공백도 있을 수 있다면 type="phone" 입력창을 이용해야 합니다
공백 입력시 추가하고 싶으면 삭제시 공백을 줄이고 watch를 사용해야 합니다
휴대폰번호는 11자리 + 공백 2자리 최대 13자리이므로 길이는 Limited
코드 구현
<body> <p id="app"> <!-- 类型为phone,最大长度为13 --> <input type="phone" v-model="dataPhone" maxlength="13"> </p> </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>
아직 배우지 않으셨나요? 서둘러서 사용해 보세요.
관련 추천 :
vue는 휴대폰 번호 복권 상하 스크롤 애니메이션 예시 공유 구현
위 내용은 Vue를 사용하여 디지털 입력 상자에서 휴대폰 번호를 분할하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!