[Vue.js] input 사용법 및 예제

오늘은 화면 구성에 기본적으로 많이 쓰이는 input 사용법에 대해서 알아보자.

input은 말 그래도 입력칸을 의미한다.

글자, 숫자, 특수기호 등 키보드로 입력할 수 있는 모든것들을 넣을 수 있다.

---

코드

App.vue

<template>
  <div>
    <input type="text" v-model="input">
    <div>
      입력결과 : {{input}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{      
      input:''
    }
  },
  methods:{

  }
}
</script>

SMALL

---

설명

코드만 봐도 느끼겠지만 정말 간단해서 설명할게 없다.

<input type="text" v-model="input">

input 태그를 만들고 입력한 값을 저장할 수 있도록 v-model을 이용하여 미리 만들어 놓은 input 변수 안에 넣고 입력결과를 데이터 바인딩 한 것이다.

---

결과

input 기본 화면

input에 글자 입력 시 화면

---