小知识点——限制文本框只能输入数字

终于把这批次的活都做完了，今天可以整理一下这次的新的小知识点。今天刷知乎的时候看到了一个回答，里面有一部分让我觉得很有意思。

北京、上海、杭州三个城市的比较，而我所工作的城市   唯一的优势  就是能上榜~

回到正题。

用vue写一个计数器，html部分：

<div id="example">
    <button v-on:click='minus()' class='minus'>-</button>
    <input v-model="message" class="inputnum" οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
    <button v-on:click='add()' class="add">+</button>
    <p>Message is: {{ message }}</p>
</div>

限制文本框只能输入数字，只需要给input框加一个

οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"

就哦了~

可以对input框数值大小进行控制。

js：

    methods: {
      add() {
        // 加 最大可加至10
        let me = this;
        if (me.message < 10) {
          me.message += 1;
        } else {
          return false;
        }
      },
      minus() {
        // 减 最小为1
        let me = this;
        if (me.message > 1) {
          me.message -= 1;
        } else {
          return false;
        }
      }
    }

因为是个原始的demo，所以我没有加任何样式。效果如下：