[Vue.js] v-model 사용자 input 받기, input 제한

이용만·2024년 1월 2일

@input : 입력할 때마다 실행해주셈
@change : 입력하고 커서 다른데 찍으면 실행해주셈

  1. 중요한 데이터(입력되는 데이터)를 담는 그릇이 필요해서 data에 변수를 등록함
  1. 사용자가 입력한 값을 month란 data 변수에 넣음

month 변수에 $event.target.value 를 통해 사용자가 입력한 값이 담겨진다.


v-model

: 자주쓰는 문법임. ex) input 에 쓰이는 데이터 값을 month에 저장해주세요.

끝. 너무 간편함.

  • textarea 사용 가능
  • select 사용 가능
  • input의 checkbox 사용가능

input 제한 -> Watcher(데이터 감시) 사용

예외발생이라 생각하면 됨. ex) 문자 입력 -> 에러!
input에 문자를 입력 시 Watcher 사용하면 데이터를 감시함.

데이터 감시하려면
watch : { 감시할데이터(){}}

month : 감시하고자 하는 데이터를 이야기 함.
a : 매개변수이고 작명은 마음대로 할 수 있음. 이 매개변수는 month 임. 바뀔 month 값.
b : 변경 전 month 값임.


숙제주심 : input에 숫자만 입력하게 하라
내가 푼 방법
1) @input 을 사용한다, 왜? 입력이 이루어질 때마다 메서드를 실행하게 하기 위함.

2) 메서드를 만든다.

  • 정규 표현식을 사용, 문자가 들어오면 문제 발생!

선생님은 다른 방법 사용..... 단 몇줄만에 끝내심..;
키워드 : isNan() -> 주어진 값이 숫자로 변환될 수 있는지 확인하는 메서드.
isNan 안에 숫자 -> false,
isNan 안에 문자 -> true

  • 근데 이 방법을 사용하면 이상한게, 한글을 두번 치면 그제서야 alert이 뜸.
    ex) ㅁ <- alert 안뜸, ㅁㅁ <- alert 뜸.
    a <- alert 바로 뜸.
  • 띄어쓰기도 가능함.
profile
성장하는 개발자가 되고자 합니다.

0개의 댓글