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>
相关推荐
Angindem1 小时前
从零搭建uniapp项目
前端·vue.js·uni-app
Bug从此不上门6 小时前
【无标题】
前端·javascript·uni-app·vue
耶啵奶膘9 小时前
uniapp+vue2解构赋值和直接赋值的优缺点
uni-app
疯狂的沙粒9 小时前
uni-app 项目支持 vue 3.0 详解及版本升级方案?
前端·vue.js·uni-app
Jiaberrr10 小时前
uniapp Vue2 获取电量的独家方法:绕过官方插件限制
前端·javascript·uni-app·plus·电量
^Rocky11 小时前
uniapp 对接腾讯云IM群公告功能
uni-app·腾讯云
段旭涛11 小时前
uniapp 设置手机不息屏
前端·uni-app
疯狂的沙粒14 小时前
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
前端·uni-app·html
狼性书生1 天前
uniapp实现的简约美观的星级评分组件
前端·uni-app·vue·组件
Jiaberrr1 天前
uniapp 安卓 APP 后台持续运行(保活)的尝试办法
android·前端·javascript·uni-app·app·保活