vue中v-model双向绑定input输入框

v-model双向绑定数据，用户在输入框中内容之后，判断用户输入的内容，然后判断内容是否为正整数，不是的话要进行转换。

先把输入的值转换为整数如果输入的值是字符串或者是 如果输入的值是带小数的数字，则将小数点之后的值去掉，只保留整数，并将其赋值给输入框

  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中的已经自动赋值为我们想要的数字了。

让输入框自动转换为我们想要的数值，解决方案：

在input组件中增加事件@blur=""，当输入框失去焦点时，把赋值为输入框中的值。

methods: {onBlur(e) {e.target.value = this.number}
}