Javascript – Optimierung der numerischen Eingabe von Vue-Mobilterminals

Question

Dies wird auf dem mobilen Endgerät verwendet.
Wenn der Eingabetyp Zahl ist, gibt es keine Beschränkung auf Englisch oder Chinesisch, und die maximale Länge hat keine Auswirkung.
Wenn der Eingabetyp Tel ist, gibt es keine Beschränkung auf Englisch oder Chinesisch maxlength hat einen Effekt, also verwenden Sie tel.
keyup, um andere Zeichen als Zahlen zu filtern.
Entschuldigung, Meister, gibt es in diesem Code Raum für Optimierungen?

<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 是不安全的。

2. var self = this 是不必要的。

3. handleFilterLetters 好长啊，改成 onKeyUp 不好读一点吗（

4. <input> 一行写的太长了，eslint-airbnb 的规则是

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

Answer 2

楼上说的都对
题主还可以多注意一下 code style
比如：
self.phoneNumber=self.phoneNumber.replace(/[^\d]/g,'');

写成
self.phoneNumber = self.phoneNumber.replace(/[^\d]/g,'');

比较好

Answer 3

这里用的局部filter

如果想可复用程度高点，全局filter也可以的

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