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>
相关推荐
性野喜悲2 小时前
uniapp返回上一页接口数据更新了,页面未更新
uni-app
冰镇生鲜4 小时前
小程序·安全·胶囊·容器组件
前端·vue.js·uni-app
盛夏绽放4 小时前
uni-app云开发总结
uni-app·云开发
halo14165 小时前
uni-app 小程序中的定位问题 以及 页面安全距离
小程序·uni-app
资深前端之路5 小时前
iphonex uniapp textarea标签兼容性处理过程梳理
uni-app
xx240621 小时前
UniApp学习笔记
uni-app
七七小报1 天前
uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
uni-app
lh_12541 天前
uniapp 常用开发技巧与实战指南
uni-app
某公司摸鱼前端1 天前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_1 天前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app