vue @change usage and operation code

@change Yes The event handler in yes is used to listen for changes in form element values.

• Two-way binding: Usually, you will use the @change event with v-model. v-model is a directive provided to implement two-way binding between form elements and data. When the user enters content, v-model automatically updates the data, and when the data changes, the value of the input box will also be updated.
• Event triggering timing: @change The event will be triggered when the value of the form element changes and loses focus (usually when the user enters the Enter key or clicks elsewhere). This is different from the @input event, which fires every time you enter.
• Event handler: You need to define a method in the Vue component as the handler for the @change event. This method will be called after the value of the form element changes, where you can perform any actions, such as verifying user input, sending requests to the server, triggering updates to other components, etc.
• Passing event object: If you need to access the event object, you can use it in the method$event Parameters to obtain. For example, if you want to get the new value of the input box, you can do this: @change="handleChange($event)" and then use $ in the method to get the new value.
• Application scenario: @change is usually used to process the final confirmation of user input, such as keyword input in the search box, form submission, etc. In these cases, you may only want to execute the corresponding logic when the user completes the input and is ready to perform the next step.

It is usually used to listen for changes in elements such as form input boxes to perform specific actions when values ​​change. The specific usage is as follows:

<template>
  <input type="text" v-model="inputValue" @change="handleChange" />
</template>
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleChange() {
      // Here you can handle the operation after the value of the input box changes      ('The value of the input box has changed, the new value is:', );
    }
  }
};
</script>

In the example above, we<input> The element uses v-model to bind inputValue data from both directions, and @change is used to listen for the change events of the input box. When the value of the input box changes, the handleChange method will be called, and you can perform any action you need in the method, such as validating the input, triggering other logic, etc.

You can also click the relevant button on the same page to switch and trigger, as follows:

<div style="float: right; margin: 10px 10px 10px 10px"> 
            <el-radio-group v-model="isShow" @change="showChange">
              <el-radio-button v-model="isShow" :label=1>value1</el-radio-button>
              <el-radio-button v-model="isShow" :label=2>value2</el-radio-button>
            </el-radio-group>
        </div>

JS

showChange(){
      if( == 1){
        //Operation performed      }else{
        //Operation performed      }
    }

This is the end of this article about the usage of @change of vue. For more related content on the usage of vue @change, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!