Ini digunakan pada terminal mudah alih
Apabila jenis input ialah nombor, tiada had dalam bahasa Inggeris atau Cina, dan panjang maksimum tidak mempunyai kesan
Apabila jenis input ialah tel, tiada had dalam bahasa Inggeris atau Cina, tetapi maxlength mempunyai kesan, jadi gunakan tel
keyup adalah untuk menapis aksara selain nombor.
Maaf, Cikgu, adakah terdapat ruang untuk pengoptimuman dalam kod ini?
<input v-model="phoneNumber" placeholder="輸入手機號" type="tel" maxlength="11" @keyup="handleFilterLetters">
<script type="text/javascript">
vm = new Vue({
el: "#app",
data: {
phoneNumber: null,
},
methods: {
handleFilterLetters: function(){
var self = this;
self.phoneNumber=self.phoneNumber.replace(/[^\d]/g,'');
},
}
})
</script>
phoneNumber
初始值應該是字符串的 ''
,否則對一個可能為 null 的變量調(diào)用 replace
tidak selamat.
var self = this
tidak perlu.
handleFilterLetters
好長啊,改成 onKeyUp
Bukankah ia mudah dibaca?
<input>
<input
v-model="phoneNumber"
placeholder="輸入手機號"
type="tel"
maxlength="11"
@keyup="handleFilterLetters"
/>
Semua yang dinyatakan di atas adalah betul
Penyoal juga boleh memberi lebih perhatian kepada gaya kod
Contohnya: self.phoneNumber=self.phoneNumber.replace(/[^d]/g,'');
ditulis sebagai self.phoneNumber = self.phoneNumber.replace(/[^d]/g,'');
Lebih baik
Penapis tempatan yang digunakan di sini
Jika anda inginkan tahap kebolehgunaan semula yang lebih tinggi, penapis global juga boleh digunakan
<p id="app" >
<input :value="phone | num" @keyup="phoneChange" />
</p>
var app = new Vue({
el: "#app",
data: { phone: "" },
methods: {
phoneChange(e) {
this.phone = e.target.value
this.$forceUpdate() // 這里必須有
}
},
filters: {
'num': function(value) {
return value.replace(/[^\d]/g, '')
}
}
})