javascript - Optimisation de la saisie numérique de la saisie du terminal mobile Vue

Question

Ceci est utilisé sur le terminal mobile.
Lorsque le type de saisie est numéro, il n'y a pas de limite en anglais ou en chinois, et maxlength n'a aucun effet.
Lorsque le type de saisie est tel, il n'y a pas de limite en anglais ou en chinois, mais. maxlength a un effet, alors utilisez tel
keyup pour filtrer les caractères autres que les chiffres.
Excusez-moi, Maître, y a-t-il de la place pour l'optimisation dans ce code ?

<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 n'est pas sécuritaire.

2. var self = this n'est pas nécessaire.

3. handleFilterLetters 好长啊，改成 onKeyUp N'est-ce pas facile à lire (

?

4. <input> Une ligne est trop longue, la règle d'eslint-airbnb est

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

Answer 2

Tout ce qui est dit ci-dessus est correct
Le questionneur peut également prêter plus d'attention au style du code
Par exemple :
self.phoneNumber=self.phoneNumber.replace(/[^d]/g,'');

s'écrit
self.phoneNumber = self.phoneNumber.replace(/[^d]/g,'');

Mieux

Answer 3

Le filtre local utilisé ici

Si vous souhaitez un degré plus élevé de réutilisabilité, des filtres globaux sont également disponibles

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