Vue의 @input과 @change의 차이점은 무엇입니까?Vue의 @input과 @change의 차이점은 무엇입니까???

Vue의 @input과 @change의 차이점은 무엇입니까??

다음의 2개의 코드 스니펫을 참조해 주세요.모두 같은 결과를 출력합니다.

<template>
  <input type="file" @input="input" />
</template>

<script>
export default {
  methods: {
    input(event) {
      console.log(event.target.files);
    },
  },
};
</script>

<template>
  <input type="file" @change="change" />
</template>

<script>
export default {
  methods: {
    change(event) {
      console.log(event.target.files);
    },
  },
};
</script>

와 어떤 차이가 있습니까?@input그리고.@change에서 일어나다.<input type="file" />요소?

이러한 이벤트는 Javascript 이벤트에서 상속됩니다.oninput그리고.onchange이것에 의해, 차이를 알 수 있습니다.

온입력 이벤트는 요소가 사용자 입력을 받을 때 발생합니다.이 이벤트는 다음 값에서 발생합니다.<input>또는<textarea>요소가 변경되었습니다.팁: 이 이벤트는 이벤트와 유사합니다.다른 점은,oninput이벤트는 요소의 값이 변경된 직후에 발생합니다.onchange내용이 변경된 후 요소가 포커스를 잃었을 때 발생합니다.또 다른 차이점은,onchange이벤트도 동작합니다.<select>요소들.

단순 입력 텍스트의 예:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  methods: {
    input() {
      console.log("input")
    },
    change() {
      console.log("change")
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input @change="change" @input="input" />
</div>

언급URL : https://stackoverflow.com/questions/63343859/whats-the-difference-between-input-and-change-in-vue-input-type-file