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

 <!-- 输入框 -->
    <input type="number" class="form-control form-control-sm ipt-num" v-model.number.lazy="number" />

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

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

  props: {
    num: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      number: this.num,
    }
  },
  watch: {
    number(newVal) {
      // 1.先把输入的值转换为整数
      const result =  parseInt(newVal)
      // 2.如果输入的值不是数字或者<1的数字，则将number定义为1
      if(isNaN(result) || result < 1) {
        this.number = 1
        // console.log(this.number);
        return 
      }
      // 3.如果输入的是小数，则去掉小数点，将整数设置为number
      if (String(newVal).indexOf('.') !== -1) {
        this.number = result
        return
      }

    }
  }

这样的话，当用户输入小数或者负数的时候，输入框显示的还是输入的内容，没有转换为我们想要的值。但是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
    }
}