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>
相关推荐
灰天7684 小时前
健身房项目 Uniapp+若依Vue3版搭建!!
uni-app
努力搬砖的程序媛儿19 小时前
uniapp广告飘窗
前端·javascript·uni-app
樊南19 小时前
【esp32-uniapp小程序】uniapp小程序篇02——Hbuilder利用git连接远程仓库
git·小程序·gitee·uni-app·hbuilder·torisegit
智驾19 小时前
uniapp,编译运行报错“Error: listen EACCES: permission denied 0.0.0.0:5173“,解决方法
uni-app·error·eacces·5173
大叔_爱编程1 天前
wx036基于springboot+vue+uniapp的校园快递平台小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
灰天7681 天前
摄影交流平台项目Uniapp+Springboot已完成
uni-app
灰天7681 天前
快递代取项目Uniapp+若依后端管理
uni-app
约定Da于配置1 天前
uniapp封装websocket
前端·javascript·vue.js·websocket·网络协议·学习·uni-app
大叔_爱编程1 天前
wx030基于springboot+vue+uniapp的养老院系统小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
毛毛三由1 天前
uniapp的插件开发发布指南
uni-app