[Vue.js] - Vue input type text와 number 데이터 바인딩 하는 방법

#vue input type이란?

Vue에서 `input` 요소의 `type` 속성은 사용자로부터 입력을 받을 때 어떤 종류의 데이터를 입력받을지를 지정하는 데 사용됩니다. `type` 속성은 다양한 입력 유형을 지정할 수 있으며, 각 유형은 특정한 유효성 검사 및 기능을 제공합니다.

일반적으로 사용되는 몇 가지 `type` 속성 값은 다음과 같습니다:

- `text`: 일반 텍스트를 입력하기 위한 기본 유형입니다.
- `number`: 숫자 값을 입력받기 위한 유형입니다. 숫자 외에는 입력할 수 없으며, 숫자와 관련된 유효성 검사가 자동으로 수행됩니다.
- `email`: 이메일 주소를 입력받기 위한 유형입니다. 이메일 형식에 맞지 않는 입력은 경고를 표시합니다.
- `password`: 비밀번호를 입력받기 위한 유형입니다. 입력 내용이 가려지고 보안을 위해 일반 텍스트로 표시되지 않습니다.
- `checkbox`: 체크박스를 표시하고 체크 여부를 나타내는 유형입니다.
- `radio`: 라디오 버튼을 표시하고 선택 여부를 나타내는 유형입니다. 여러 개의 라디오 버튼 중 하나만 선택할 수 있습니다.
- `date`: 날짜를 입력받기 위한 유형입니다. 일반적으로 달력 선택기와 함께 사용됩니다.

이 외에도 `file`, `time`, `color`, `range`, `url` 등 다양한 `type` 속성 값이 있습니다. `type` 속성을 사용하여 원하는 유형의 입력을 정확하게 지정할 수 있습니다.

 

 

#vue input type=text 데이터 바인딩 하는 방법

-Vue.js 코드

v-model은 내부적으로 input type=text의 value 속성을 사용하게 되는데 v-model에 data()에 정의된 키값(inputModel)을 넣어주면 모델인 data와 뷰인 input type=text의 value 속성이 서로 양방향으로 데이터 바인딩이 됩니다.

<template>
    <input type="text" v-model="inputModel" />
</template>

<script>
    export default {
        data() {
            return {
                inputModel: '안녕하세요'
            };
        }
    }
</script>

 

-input type=text 데이터 바인딩 테스트

model과 view가 바인딩되어서 출력되는 것을 확인하실 수 있습니다.

 

 

#vue input type=number 데이터 바인딩 하는 방법

-v-model.number 디렉티브

Vue.js에서 `v-model.number` 디렉티브는 사용자가 입력한 문자열 값을 자동으로 숫자 값으로 변환해 주는 기능을 제공합니다. 일반적으로 `v-model` 디렉티브는 입력 요소의 값과 Vue.js 데이터 모델의 값을 양방향으로 바인딩하는 데 사용됩니다. 그러나 `v-model` 디렉티브를 사용하면 기본적으로 입력 요소의 값은 문자열로 처리됩니다.

 

-Vue.js 코드

<template>
    <input type="number" v-model.number="inputModel" />
</template>

<script>
    export default {
        data() {
            return {
                inputModel: 777
            };
        }
    }
</script>

 

-input type=number 데이터 바인딩 테스트