Vue#9 - input

juyeong-s·2021년 7월 28일
0

Vue

목록 보기
9/15

1. input에 입력한 값 알아내기

사용자가 input에 값을 입력할 때마다 실행됨

@input="$event.target.value"	//e.target.value랑 같은거임

2. input에 입력한 값을 데이터에 저장하기

  1. 데이터에 등록
data(){
        return{
            month : 1,
        }
    },
  1. 저장하기
    <input @input="month = $event.target.value">
  2. 사용하기 - {{ }}안에 있으므로 중복해서 {} 안써줘도 됨
 {{원룸들[clicked].price * month }}

3. 축약버전

유저가 입력한 값이 month로 저장됨

<input v-model = "month" >
<select> , <textarea> 등등에도 적용 가능

4. input값을 숫자로 저장하기

❗ input에 입력한 값은 전부 문자자료형으로 저장된다 ❗

{{원룸들[clicked].price month }}
여기서
대신 +로 쓰면 input은 문자형으로 저장되기 때문에 뒤에 붙는다

<input v-model.number="month" >

4. @change="함수명"

input이 바뀌면 실행됨

profile
frontend developer

0개의 댓글