el-input绑定事件

el-input是ElementUI中的一个输入框组件，可以用来实现用户输入数据的功能。在Vue项目中，我们通常需要对el-input组件进行数据绑定和事件绑定，以实现数据的响应式和事件的处理。

对于el-input组件的数据绑定，我们可以利用v-model指令来实现。例如，我们可以将一个字符串变量绑定到el-input的value属性上，当用户在输入框中输入内容时，这个字符串变量就会自动更新：

<el-input v-model="text"></el-input>

在Vue实例中，我们可以定义一个data属性text，作为el-input组件的数据源：

export default {
  data() {
    return {
      text: ''
    }
  }
}

这样就实现了一个简单的双向绑定，当用户在输入框中输入文本时，text属性就会实时更新。

除了数据绑定，我们也可以通过el-input组件的@事件名来监听组件发生的事件，例如输入框内容变化事件change、焦点获取事件focus等等。如下所示，我们定义了一个名为handleChange的方法，当用户在输入框中输入内容时，就会触发这个方法并将输入框内容作为参数传递进去：

<el-input v-model="text" @change="handleChange"></el-input>

export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    handleChange(value) {
      console.log('输入框内容变为：', value);
    }
  }
}

绑定事件的方式与data属性的绑定方式类似，都是在Vue实例对象上定义一个methods属性，将事件处理函数定义在该属性内部即可。通过这种方式，我们可以方便地监听el-input组件的各种事件，以完成输入框的验证、联想提示等任务。