uni-app input组件 v-model 只能输入小数点后2位

有这么一个需求：一个input输入框列表，只能输入数字，且用户只能输入小数点后2位，在失去焦点时可以拿到其输入值，如下所示

输入列表很好实现，v-for 就可以了， 输入数字也好办，设置input组件type="number"就可以了。失去焦点时拿到输入值也好做，用input 组件@blur 事件就可以。代码如下：

<template>
  <view class="content">
    <view>
      <text class="title">{{ title }}</text>
      <view style="margin-top: 32rpx">
        <view v-for="(item, index) of priceList" :key="item.id" class="price-wrapper">
          <view>{{ item.label }}:</view>
          <view class="input-wrapper">
            <input :placeholder="item.price" type="number" v-model="inputPrice" @blur="onInputDone($event, index)" style="padding-left: 16rpx"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'input 输入框 v-model用法',
      priceList: [
        {
          id: 'price-1',
          label: '价格-1',
          price: 100,
        },
        {
          id: 'price-2',
          label: '价格-2',
          price: 200,
        },
        {
          id: 'price-3',
          label: '价格-3',
          price: 300,
        },
			],
			inputPrice: ''
    }
  },
  onLoad() {},
  methods: {
		onInputDone(event, index){
			console.log('blur event: ', event)
		}
	},
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.price-wrapper {
	display: flex;
	margin-bottom: 20rpx;
}
.input-wrapper {
  width: 196rpx;
  height: 48rpx;
  border: 1rpx solid #999999;
  margin-left: 16rpx;
}
</style>

测试一下，输入价格时，3个输入框都随着改变，细心的读者已经发现了，v-model = "inputPrice"导致的，3个输入框共用一个变量，当然跟着一起变化咯。设置inputPrice为数组就可以了，代码如下：v-model="inputPrice[index]" 。 

再次测试一下，OK了。 接着实现用户只能输入小数点后2位，也就是在输入小数点后3位时让用户输入不进去。我们发现uni-app input组件有如下描述：

用input事件处理函数就可以，尝试修改一下：

<template>
  <view class="content">
    <view>
      <text class="title">{{ title }}</text>
      <view style="margin-top: 32rpx">
        <view v-for="(item, index) of priceList" :key="item.id" class="price-wrapper">
          <view>{{ item.label }}:</view>
          <view class="input-wrapper">
            <input :placeholder="item.price" type="number" v-model="inputPrice[index]" @blur="onInputDone($event, index)" @input="onInput($event, index)" style="padding-left: 16rpx"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'input 输入框 v-model用法',
      priceList: [
        {
          id: 'price-1',
          label: '价格-1',
          price: 100,
        },
        {
          id: 'price-2',
          label: '价格-2',
          price: 200,
        },
        {
          id: 'price-3',
          label: '价格-3',
          price: 300,
        },
			],
			inputPrice: []
    }
  },
  onLoad() {},
  methods: {
		onInputDone(event, index){
			console.log('blur event: ', event)
		},
		onInput(event, index){
			let _value = event.detail.value
			console.log('onInput _value: ', _value)
			_value = _value.includes('.') ? _value.substring(0, _value.indexOf('.') + 3) : _value; //保留小数点后2位
			console.log('onInput _value after: ', _value)
      this.$set(this.inputPrice, index, _value)
      return _value
    },
	},
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.price-wrapper {
	display: flex;
	margin-bottom: 20rpx;
}
.input-wrapper {
  width: 196rpx;
  height: 48rpx;
  border: 1rpx solid #999999;
  margin-left: 16rpx;
}
</style>

 

通过打印发现成功截取输入的字符了， 但是没有生效，用户还是能继续输入。猜测是v-model导致的，@input事件被v-model覆盖掉了，因为v-model 是v-bind @input的语法糖。 把v-model去掉就可以了，打印如下：