javascript - vue terminal mudah alih input pengoptimuman input berangka

Question

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>

Answer 1

1. phoneNumber 初始值应该是字符串的 ''，否则对一个可能为 null 的变量调用 replace tidak selamat.

2. var self = this tidak perlu.

3. handleFilterLetters 好长啊，改成 onKeyUp Bukankah ia mudah dibaca?

4. Satu baris terlalu panjang, peraturan eslint-airbnb ialah

   <input>

   <input
     v-model="phoneNumber"
     placeholder="输入手机号"
     type="tel"
     maxlength="11"
     @keyup="handleFilterLetters"
   />

Answer 2

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

Answer 3

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, '')
    }
  }
})