uniapp App端 解决input@input事件动态修改值不生效的问题

解决方法

1.延迟修改,利用setTimeout
2.异步修改,利用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>
相关推荐
巧克力力克巧!1 小时前
uni-app+vue3学习随笔
vue.js·学习·uni-app
千里码aicood4 小时前
【2025】基于springboot+uniapp的乡村旅游小程序系统统(源码、万字文档、图文修改、调试答疑)农家乐预约
spring boot·uni-app·旅游·乡村旅游
码农研究僧4 小时前
深入浅出Bearer Token:解析工作原理及其在Vue、Uni-app与Java中的实现Demo
java·vue.js·uni-app
上趣工作室4 小时前
在 UniApp 开发的网站中使图片能够缓存,不一直刷新
缓存·uni-app
nelly5214 小时前
UniApp IOS打包之后,首次安装ipa包,白屏,监听网络状态
uni-app
cv高级工程师YKY4 小时前
前端 - uniapp - - 滚动容器scroll-view实现横向滚动
前端·uni-app
coder阿龙4 小时前
【UNIAPP】获取视频的第一帧作为封面(基于视频URL,Canvas)复制即用
前端·uni-app·音视频
堕落年代6 小时前
Uniapp使用地图的时候滑动上层的view地图也滑动
uni-app
晓风伴月6 小时前
Trae AI 辅助修复uniapp 微信小程序的Bug
uni-app·bug·trae