elememt el-input 的oninput 和@input 有什么区别

Question

elememt el-input 的oninput 和@input 有什么区别？ oninput 事件可以直接写到行内能生效，@input 不能直接写到行内，写到方法里 正则校验也不能生效？这是为啥？

Answer 1

【以下回答由 GPT 生成】

答案:

在ElementUI中，el-input是一个常用的输入组件，用于接收用户的输入值。它包含了一些常用的事件和属性，其中就包括oninput和@input。

1. oninput：是一个原生的HTML事件，在input元素的输入内容改变时触发。可以通过直接在行内添加事件处理函数来使用。例如： html <el-input type="text" oninput="handleInput"></el-input> 在handleInput函数中，可以获取到用户输入的内容。

javascript function handleInput(event) { let inputValue = event.target.value; // 处理用户输入的值 }

1. @input：是Vue的语法糖，用于绑定元素的input事件。需要将其绑定到一个Vue实例的方法上，可以通过methods选项定义。例如： html <el-input type="text" @input="handleInput"></el-input>

在Vue实例中定义handleInput方法，可以像常规的Vue事件处理函数一样进行处理。

javascript methods: { handleInput(event) { let inputValue = event.target.value; // 处理用户输入的值 } }

总结起来，oninput是HTML的自带事件，而@input是Vue提供的语法糖，用于绑定Vue实例的方法。它们的区别如下：

• oninput可以直接写在行内，而@input需要写在Vue实例的方法中；
• oninput是HTML的原生事件，而@input是Vue封装的事件；
• oninput的正则校验可以在行内写，正常生效，而@input的正则校验通常需要在方法中使用Vue的数据驱动方式进行处理。

关于正则校验的问题，可以通过在Vue的方法中使用computed属性来实现。具体代码如下：

<el-input type="text" :value="inputValue" @input="handleInput"></el-input>

data() {
  return {
    inputValue: ''
  };
},
computed: {
  filteredInputValue() {
    // 正则校验
    return this.inputValue.replace(/[^0-9]/g, '');
  }
},
methods: {
  handleInput(event) {
    this.inputValue = event.target.value;
  }
}

在这个例子中，我们使用computed属性filteredInputValue来进行正则校验，将校验后的值绑定到el-input的:value属性上。在handleInput方法中，将用户输入的值赋值给inputValue，从而更新filteredInputValue的值，并应用正则校验。这样保证了正则校验在@input绑定的方法中能够生效。

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7649241
• 这篇博客也不错, 你可以看下oninput和onchange在input框里触发函数的问题
• 除此之外, 这篇博客: input输入框事件流程变化中的 oninput 输入值变化事件 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^