el-element和van-field组件输入中校验，以及输入框中的值未被同步修改问题

需求背景：在输入中过滤掉输入框中的emoj表情

在开发过程中发现，输入框v-model绑定值之后，只在失去焦点时进行判断，不符合需求。

而且在用input和change方法对绑定值进行修改时，输入框中的值未发生修改，并且发现了一些其他的问题。

所以，我总结了所遇到的问题，希望对大家有所帮助

在输入中校验数字的最大值

在设置了max属性时，输入框确实会校验是否满足，但是是在失去焦点后校验，所以要想在输入中校验则需要用到 input或change方法

<template>
           <van-field
              v-model="formData"
              label="年龄"
              :min="0"
              :max="150"
              @input="
                inputValidMinMax({ min: 0, max: 150 })
              "
            >
<script>
 const formData = ref('')  

const inputValidMinMax= () => {
      if (formData  >= max) {
        formData.value  = max;
      }
      if (formData  <= min) {
        formData.value  = min;
      }
}
</script>

如果不使用input方法，则无法在输入中校验是否大于等于150，小于等于0

输入中移除-，+等符号

<template>
           <van-field
              v-model="formData"
              label="内容"
              @input="（event) =>{
                //通过事件对象event获取输入框中输入的值
                const str = event.target.value
                //对值进行校验，过滤不需要的值
                inputValid(str)
               }
              "
            >
<script>
 const formData = ref('')  

const inputValid= (str) => {
    //将不需要的值替换为''空字符串
    const filtered = str.replace(/[^a-zA-Z0-9]/g, "")
    //再将过滤后的字符串赋值给formData
    formData.value = filtered
}
</script>

使用事件对象event的方法，是在赋值前对将要赋的值进行修改的，就不会出现明明打印出的值没问题，但是输入框的值不发生修复的问题。

（如果是emoj表情，则需要引入emoj库，将正则部分替换为判断是否为emoj的部分即可）