uniapp如何实现输入框监听值

前言

在uniapp中，实现输入框监听值可以使用v-model和input事件两种方式。v-model可以直接和data中的变量绑定，简单方便；input事件可以通过函数对每次输入值进行处理，自由度更高。

使用v-model实现输入框监听值

在模板中使用v-model绑定data中的变量，然后在data中添加变量即可实现输入框的监听。

    <template>
      <view>
        <input v-model="inputValue" />
        <view>监听值：{{inputValue}}</view>
      </view>
    </template>

    <script>
    export default {
      data() {
        return {
          inputValue: ''
        }
      }
    }
    </script>
  

使用input事件自定义输入框监听函数

在模板中使用@input监听输入事件，然后在methods中添加相应函数进行处理。

    <template>
      <view>
        <input @input="inputChange" />
        <view>监听值：{{inputValue}}</view>
      </view>
    </template>

    <script>
    export default {
      data() {
        return {
          inputValue: ''
        }
      },
      methods: {
        inputChange(e) {
          this.inputValue = e.target.value
        }
      }
    }
    </script>
  

总结

在uniapp中，使用v-model和input事件都可以实现输入框的监听。v-model简单方便，但是不够灵活；input事件自由度更高，可以通过函数自定义处理每次输入事件。