# 인풋창에 입력한 값
<span>Month : </span>
<input @input="monthChosen = $event.target.value">
<p>{{monthChosen}} 개월 선택할거야?</p>
<p>{{monthChosen * products[now].price }}원</p>
인풋값에 입력한값은 monthChosen이란 데이터값에 저장된다.
그리고 데이터에
data(){
return{
monthChosen : 1,
dataa : '',
}
},
이렇게 monthChosen은 기본값 1로 해놨다.
그리고 p태그들 안에서 데이터를 사용하면 된다.
# 축약버전
<input v-model="dataa">
<p>{{dataa}}</p>
dataa라는 키값에 인풋값을 자동으로 저장해줌.
v-model.number하면 받은 인풋값을 숫자로 저장해줌.
## watcher사용 (인풋값 감시)
monthChosen의 인풋값에 숫자만 와야함.
data(){
return{
monthChosen : 1,
dataa : '',
}
},
watch : {
monthChosen(a){
if(a==''){
console.log('빈칸')
this.monthChosen = 1;
}else if(!Number(a)){
alert('Please put only one number')
this.monthChosen = 1;
}
}
},
데이터 밑에 watch객체를 만들어주고 여기엔 메서드를 넣어주면됨
메서드 이름은 꼭 데이터 키값과 같아야한다!!
#두가지 기능
-빈칸검사
빈칸을 쓰면 데이터를 1로 바꿔주고 콘솔에 빈칸뜨게해놈
-숫자검사
숫자아닌 다른값 쓰면 알러트창 뜨게됨
못배운건 데이터값은 수정했지만 현재 인풋을 수정하는 기능은 안배움.
인풋값 감시 하는방법
예를들어 비밀번호 대문자들어가야하고 이런거는 많이들 써서
라이브러리가 있음.
form validation라이브러리.
'javaScript > vueJs' 카테고리의 다른 글
| vue js 기본 // 라우터 (0) | 2022.07.28 |
|---|---|
| vue js 기본 // multi word 에러 (0) | 2022.07.28 |
| vueJsvue js 기본 // 부모한테 가져온 데이터를 수정하고싶을때 @커스텀이벤트 (0) | 2022.07.05 |
| vueJsvue js 기본 // 컴포넌트 & 프롭스 (0) | 2022.07.05 |
| vue js 기본 // 시작전 복습 프로젝트 생성, v-if, v-for, 데이터바인딩, 함수, 이벤트 (0) | 2022.07.04 |