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>
相关推荐
织_网10 小时前
UniApp 快速集成个推推送(UniPush2.0)完整实战教程
uni-app
星星~笑笑11 小时前
vue 超简单 oss分片上传文件 大文件上传阿里云
前端·javascript·vue.js·uni-app
jingling5551 天前
uni-app农场地图——高德 JS API 实现全解析(天地图影像作为layers)
uni-app
2501_916008891 天前
Mac 上生成 AppStoreInfo.plist 文件,App Store 上架
android·macos·ios·小程序·uni-app·iphone·webview
__zRainy__1 天前
uni-app 全局容器实战系列(四):全局容器动态调用设计
uni-app
2501_916007472 天前
iOS开发中抓取HTTPS请求的完整解决方法与步骤详解
android·网络协议·ios·小程序·https·uni-app·iphone
00后程序员张2 天前
Windows 下怎么生成 AppStoreInfo.plist?不依赖 Xcode 的方法
ide·macos·ios·小程序·uni-app·iphone·xcode
__zRainy__2 天前
uni-app 全局容器实战系列(二):Vite 虚拟模块
windows·uni-app
__zRainy__2 天前
uni-app 全局容器实战系列(一):全局容器的实现
uni-app·vite
安生生申3 天前
uni-app 连接 JDY-31 蓝牙串口模块实践
c语言·前端·javascript·stm32·单片机·嵌入式硬件·uni-app