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

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



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

























































回到正题。

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

<div id="example">
<button v-on:click='minus()' class='minus'>-</button>
<input v-model="message" class="inputnum" onkeyup="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框加一个

onkeyup="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，所以我没有加任何样式。效果如下：