Vue.js input박스, 숫자 곱하기 및 더하기
2021. 4. 11. 18:28
input박스에서 숫자를 넣고
그 밑에 글자로 기존가격*input에넣은숫자 하고싶을때
스크립트 안에 month 데이터를 준다
기본 1달로 설정함
export default {
name: 'modal',
data() {
return{
oneroom_data: oneroom_data,
modalOnFlag: false,
index:0,
month:1,
}
},
}
데이터에 지정해둔 month를 input에 내가 넣는 숫자를 지정해주고싶으면
<input @input="month = $event.target.value">
쌩 자바스크립트로 이렇게 짜는데
이걸 vue.js 문법으로
간단히 하면
<input v-model="month">
v-model 이라는걸 쓰면 간단히 할 수 있음!
그리고 여러가지
<!-- 기존 쌩자바스크립트 -->
<input @input="month = $event.target.value">
<!-- input에 입력한것들은 모두 문자자료로 인식함 -->
<textarea v-model="month"></textarea>
<!-- true or false -->
<input type="checkbox" v-model="month">
<!-- 선택형 -->
<select v-model="month">
<option value="2314"></option>
<option value="fgff"></option>
<option value="13414"></option>
</select>
<!-- 더하기를 하게만들고싶으면 .number형으로 만들어줘야함 (기본은 숫자아니고 문자자료라서) -->
<input v-model.number="month">
<!-- .number형으로 지정안해줘도 곱하기는 알아서 잘 됌 -->
<p>{{month}}개월 : {{oneroom_data[index].price * month}}원</p>
'공부 > Vue.js' 카테고리의 다른 글
Vue.js UI 애니메이션 주는법 vue 문법 transition태그를 이용하기 (0) | 2021.04.11 |
---|---|
Vue.js data를 감시하는 함수 watch (0) | 2021.04.11 |
Vue.js 커스텀이벤트 Custom Event - 부모 컴포넌트의 데이터를 수정하고 싶을때 (0) | 2021.04.11 |
Vue.js Props 보낼때 다양한 방법 :작명="데이터이름" (0) | 2021.04.11 |
vue.js 컴포넌트 component 만드는 방법, Props - 깔끔하게 html 만들기 (0) | 2021.04.10 |