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>
相关推荐
小徐_23333 小时前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·微信小程序·uni-app
skiyee6 小时前
🔥 oiyo & unibest = 又新又好的 uniapp 模板
前端·uni-app
结网的兔子2 天前
【前端开发】Web端迁移至 uni-app 及鸿蒙扩展方案对比
前端·uni-app·harmonyos
2501_915909062 天前
iOS 应用反调试技详解术 检测调试器的原理与防护实践
android·ios·小程序·https·uni-app·iphone·webview
AI多Agent协作实战派3 天前
AI多Agent协作系统实战(二十八):顶栏统一战争——从1个页面异常到31个页面全量对齐
数据库·人工智能·uni-app
00后程序员张3 天前
iOS加固技术路线全面解析:Bitcode模式、源码模式与汇编模式对比及爱加密优势
android·汇编·ios·小程序·uni-app·cocoa·iphone
2501_916008893 天前
iOS IPA文件反编译与打包操作方法,拆包分析防护和加固打包
android·macos·ios·小程序·uni-app·cocoa·iphone
name好难取诶3 天前
通过对云基座和离线基座的对比,帮助开发者理解如何在不同场景下选择合适的打包方案。 什么是“基座” 在 UniApp 中,基座(也称“ ...
开发语言·uni-app·php
2501_915921433 天前
iOS手游安全反外挂解决方案:基于Xcode的加固混淆特色详解
android·安全·ios·小程序·uni-app·iphone·xcode
2501_916007474 天前
iOS App分发教程 App Store、TestFlight 与 Ad Hoc 的配置与上传方法
android·ios·小程序·https·uni-app·iphone·webview