Vue.js input박스, 숫자 곱하기 및 더하기

2021. 4. 11. 18:28 공부/Vue.js

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>

 

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>