The difference between @change, @input and @blur in Vue and the introduction of @keyup

1. @change, @input, @blur events

@change fires after the input box changes and loses focus;

@input triggers after the input box content changes (before the interface loads data)

@blur triggers if you lose focus

Notice:

@change before @blur

The default parameters of @input and change are input content, while the default parameters of blur are dom nodes.

After selecting data in the search drop-down box, search for the case immediately:

<!-- Pull down search box -->
        <el-select 
          v-model=""
          clearable 
          placeholder="Please select the agreement number"
          filterable 
          class="filter-item"
          @change="handleFilter"   //Add @change event and call the filter function handleFilter()         >
          <el-option
            v-for="item in productList"
            :key=""
            :label=""
            :value=""
            :title=""
            style="width: 200px">
          </el-option>
        </el-select>

2. @keyup event

@keyup (keyboard event) in Vue is the event that triggers when the specified key is released, and different key responses can be listened to.

The example of filtering after entering data in the input box and pressing the enter key is as follows:

<el-input 
	v-model="" 
	maxlength="30" 
	placeholder="Please enter your mobile phone number or username" 
	style="width: 200px"
  	class="filter-item" 
  	clearable 
  	@clear="handleFilter"   //The user clicks the clear button and calls the filter function to return to all lists  	@="handleFilter" />  // After inputting, press enter to call the filter function and return a list that meets the conditions

@click: triggered when the user clicks the clear button in the emptiable radio mode

Supplement: Custom parameter passing of @change event of el-input

1. Invalid transmission of parameters

@change="change(val, index)"

2. Effective transmission of grammar

@change="((val)=>{change(val, index)})"

<div v-for="(item,index) in itemList">
   <el-input
           v-model=""
           @change="((val)=>{doSomething(val, index)})">
           
   </el-input>
 </div>

Summarize

This is the article about the difference between @change, @input and @blur in Vue and the introduction of @keyup. For more related content in @change, @input and @blur in Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!