입력된 값을 세팅 (@input)

Vue.js에서 input 요소에 사용자가 입력할 때(keyin 이벤트) 입력된 값을 가져오려면 다음과 같이 이벤트 처리를 할 수 있습니다.

html
<template>
  <div>
    <input v-model="inputValue" @input="handleInput" />
    <p>입력된 값: {{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '' // 입력된 값을 저장할 데이터
    };
  },
  methods: {
    handleInput() {
      // 입력된 값을 가져와서 데이터에 저장합니다.
      this.inputValue = event.target.value;
    }
  }
};
</script>

위의 코드에서는 @input="handleInput" 부분에서 @input 이벤트를 사용하여 입력값이 변경될 때 handleInput 메서드를 호출하도록 설정했습니다. handleInput 메서드에서는 event.target.value를 통해 입력된 값을 가져와 this.inputValue에 저장하고, 화면에는 {{ inputValue }}를 사용하여 입력된 값을 표시합니다.

이렇게 하면 사용자가 input 요소에 텍스트를 입력할 때마다 해당 입력값이 실시간으로 표시됩니다.