【uni-app一个很大的坑】监听input标签的输入事件获取输入的值uni-app和Vue有很大的区别【uni-app的input接收值延迟的解决办法】

左手的ㄟ右手 2021-08-13 13:06 1394阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

### **官方推荐input事件获取内容方式： ** ###

<template>
        <view>
            <input type="number" placeholder="请输入" @input="onInput" />
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    number: 0
                }
            },
            methods: {
                onInput(e) {
                    // 【不用v-model绑定表单,直接时间获取值】这种方式是uni-app官方的方式,测试结果正确！
                    console.log(e.detail)
                    this.number = e.detail
                }
            }
        }
    </script>
    <style>
    
    </style>

### **input事件的三种用法【传统Vue的玩法这里不好使】** ###

<template>
        <view>
            test
            <input type="number" placeholder="请输入" @input="onInput" v-model="number" />
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    number: 0
                }
            },
            methods: {
                onInput(e) {
                    // 传入的Vue是没问题的,但是uni-app会延时,导致输入的结果和打印的结果有时间误差，不一致！
                    console.log(this.number)
                    
                    // uni-app框架官方说明：input事件处理函数内实时修改当前值不生效，可以延迟设置！
                    // 延时的结果,输入的结果和打印的结果一致！
                    setTimeout(() => { console.log(this.number) }, 0)
                    
                    // 这种方式是uni-app官方的方式,测试结果正确！
                    console.log(e.detail)
                }
            }
        }
    </script>
    <style>
    
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210813/dd417ea18fa2422ea410737e80236fc4.png