搜了一下方法有两种,一是延迟修改,利用setTimeout;二是异步修改,利用this.$nextTick,代码参考如下:

<template>
    <view>
        <input v-modal="num" type="number" placeholder="请输入" :maxlength="3" @input="onInputOne" />
        <input v-modal="discount" type="number" placeholder="请输入" :maxlength="3" @input="onInputTwo" />
    </view>
</template>
<script>
    export default {
        data() {
            return {
                num: '',
                discount: ''
            }
        },
        methods: {
            // 这里举例折扣大于0,但是小于10,默认最小值为0,最大值为9.9
            // 第一种方法使用延时,H5端有效,但App端不是很完美,其他端未测
            onInputOne() {
                if (Number(this.num) < 0) {
                    this.num = '0'
                } else if (Number(this.num) >= 10) {
                    setTimeout(() => {    // 设置延迟10ms有效,App端设置0实测无效
                        this.num = '9.9'
                    }, 10)
                }
            },

            // 第二种方法使用异步修改,利用this.$nextTick实现
            onInputTwo() {
                if (Number(this.num) < 0) {
                    this.num = '0'
                } else if (Number(this.num) >= 10) {    // APP,H5端实测有用
                    this.$nextTick(() => {
                        this.num = '9.9'
                    })
                }
            }
        }
    }
</script>
<style>
 
</style>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐