[Vue.js] 9. input 데이터 변경

input에서 데이터 입력하기

1. 초기 데이터 값 세팅
2. input 태그에 입력할 데이터 이름 작성

 

<input @input="넣을값이름 = $event.target.value" />
<input v-model="넣을값이름" /><!-- 위 코드 축약버전 -->

ex)

<template>
    <div class="white-bg">
        <input @input="month = $event.target.value" /><!-- event : 자바스크립트에서 e랑 같음 -->
        <input v-model="month" />
        <input v-model.number="month" /> <!-- .number 붙여주면 숫자가됨-->
    </div>
</template>

<script>
export default {
    name: 'Modal-product',
    data() {
        return {
            month: 1, // 초기 값의 데이터타입대로 이후 input에서 month 값이 변경됨. 단 input은 무조건 문자
        };
    },
};
</script>

 

참고)

@input="" 입력할 때마다 실행

@change="" 입력하고 커서가 다른 곳으로 가면 실행

 

+ input 태그 외에 textarea, select, checkbox 등등에서도 가능

 

- select

<select v-model="month"> <!-- month데이터의 값을 option중 선택한 걸로 변경 -->
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>