在开发的时候遇到这么一种情况,我们希望input输入框的值是数字,当你输入0或者空的时候回重置为1,特别是做商城是需要这个操作的,但是试过很多办法发现都实现不了,最后是按照以下方法解决的,问题原因是uni-app会延时,导致输入的结果和打印的结果有时间误差,不一致!所以我们需要加一个定时器
<template>
- <view>
- test
- <input type="number" placeholder="请输入" @input="onInput" v-model="number" />
- </view>
</template>
<script>
- export default {
- data() {
- return {
- number: 1
- }
- },
- methods: {
- onInput(e) {
- // 传入的Vue是没问题的,但是uni-app会延时,导致输入的结果和打印的结果有时间误差,不一致!
- console.log(this.number)
- // uni-app框架官方说明:input事件处理函数内实时修改当前值不生效,可以延迟设置!
- // 延时的结果,输入的结果和打印的结果一致!
- setTimeout(() => {
- if (e.detail.value == 0||e.detail.value =='') {
- this.number = 1
- //console.log(666)
- } else {
- this.numbe = e.detail.value
- }
- }, 0)
- }
- }
- }
</script>