踩坑---uni-app中监听input输入框的值

文章标签: uni-app
4451

在开发的时候遇到这么一种情况,我们希望input输入框的值是数字,当你输入0或者空的时候回重置为1,特别是做商城是需要这个操作的,但是试过很多办法发现都实现不了,最后是按照以下方法解决的,问题原因是uni-app会延时,导致输入的结果和打印的结果有时间误差,不一致!所以我们需要加一个定时器

1200815578.png

<template>

  • <view>
  • test
  • <input type="number" placeholder="请输入" @input="onInput" v-model="number" />
  • </view>

</template>

<script>

  • export default {
  • data() {
  • return {
  • number: 1
  • }
  • },
  • methods: {
  • onInput(e) {
  • // 传入的Vue是没问题的,但是uni-app会延时,导致输入的结果和打印的结果有时间误差,不一致!
  • console.log(this.number)
  • // uni-app框架官方说明:input事件处理函数内实时修改当前值不生效,可以延迟设置!
  • // 延时的结果,输入的结果和打印的结果一致!
  • setTimeout(() => {
  • if (e.detail.value == 0||e.detail.value =='') {
  • this.number = 1
  • //console.log(666)
  • } else {
  • this.numbe = e.detail.value
  • }
  • }, 0)
  • }
  • }
  • }

</script>

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :