<!-- 输入框 --><input type="number" class="form-control form-control-sm ipt-num" v-model.number.lazy="number" />
v-model双向绑定数据number，用户在输入框中内容之后，判断用户输入的内容，然后判断内容是否为正整数，不是的话要进行转换。
先把输入的值转换为整数如果输入的值是字符串或者是 <1 的数字，则将输入框内容赋值为1如果输入的值是带小数的数字，则将小数点之后的值去掉，只保留整数，并将其赋值给输入框
props: {num: {type: Number,default: 0,}},data() {return {number: this.num,}},watch: {number(newVal) {// 1.先把输入的值转换为整数const result = parseInt(newVal)// 2.如果输入的值不是数字或者<1的数字，则将number定义为1if(isNaN(result) || result < 1) {this.number = 1// console.log(this.number);return }// 3.如果输入的是小数，则去掉小数点，将整数设置为numberif (String(newVal).indexOf('.') !== -1) {this.number = resultreturn}}}
这样的话，当用户输入小数或者负数的时候，输入框显示的还是输入的内容，没有转换为我们想要的值。但是vue中的number已经自动赋值为我们想要的数字了。
让输入框自动转换为我们想要的数值，解决方案：
在input组件中增加事件@blur="onBlur"，当输入框失去焦点时，把number赋值为输入框中的值。
<!-- 输入框 --><input type="number" class="form-control form-control-sm ipt-num" v-model.number.lazy="number" @blur="onBlur"/>
methods: {onBlur(e) {e.target.value = this.number}}
