Element UI el-input 输入值监听方法：input、change、keyup、keydown详解

el-input 有以下几种监听输入值的方法：\n\n1. 使用input事件监听输入值的变化，该事件会在用户每次输入时触发。\n\nhtml\n<el-input v-model="inputValue" @input="handleInput"></el-input>\n\n\njavascript\nmethods: {\n handleInput(value) {\n console.log(value); // 输出输入的值\n }\n}\n\n\n2. 使用change事件监听输入值的变化，该事件会在用户输入完成、失去焦点或按下回车键时触发。\n\nhtml\n<el-input v-model="inputValue" @change="handleChange"></el-input>\n\n\njavascript\nmethods: {\n handleChange(value) {\n console.log(value); // 输出输入的值\n }\n}\n\n\n3. 使用keyup事件监听按键抬起时的输入值变化，该事件会在用户按下键盘上的任意键并抬起时触发。\n\nhtml\n<el-input v-model="inputValue" @keyup="handleKeyup"></el-input>\n\n\njavascript\nmethods: {\n handleKeyup(event) {\n console.log(event.target.value); // 输出输入的值\n }\n}\n\n\n4. 使用keydown事件监听按键按下时的输入值变化，该事件会在用户按下键盘上的任意键时触发。\n\nhtml\n<el-input v-model="inputValue" @keydown="handleKeydown"></el-input>\n\n\njavascript\nmethods: {\n handleKeydown(event) {\n console.log(event.target.value); // 输出输入的值\n }\n}\n\n\n需要注意的是，以上方法中的inputValue是指绑定的输入框的值，可以通过v-model指令进行双向绑定。