この記事では主に、番号入力ボックスでの携帯電話番号の分割を実装した Vue の例を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
要件
携帯端末にシステム数字キーボードが表示され、携帯電話番号を入力する場合は、344 形式の分割を使用してください。
分析:
まず、モバイル端末で数字キーボードをポップアップ表示したい場合、スペースも使用できる場合は、type="phone" の入力ボックスを使用する必要があります
入力を実装したり、スペースを追加したり、削除時にスペースを減らしたりする場合は、watchを使用する必要があります
携帯電話番号は11桁で、スペース2つを加えて最大13桁であるため、長さは限定
コード実装
<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 は携帯電話番号の抽選を実装し、上下スクロール アニメーションの例を共有します
AngularJS はフォーム検証の携帯電話番号機能を実装します
以上がVue を使用してデジタル入力ボックスで携帯電話番号を分割する方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
