textarea

<tempalete>
 <div id="app">
  <textarea v-model="txtVal"></textarea>
  <p>내용 : {{ txtVal }}</p>
  <p>글자수 : {{ txtVal.length }}</p>
 </div>
</template>


<script>
 new vue ({
  el: "#app",
  data: {
   txtVal: "내용을 입력하세요~"  
  }
 })
</script>

checkbox

<tempalete>
 <div id="app">
  <input type="checkbox" id="check1" v-model="checkVal">
  <p>체크상태 : {{ checkVal }}</p>
 </div>
</template>


<script>
 new vue ({
  el: "#app",
  data: {
   checkVal: false  
  }
 })
</script>

checkbox 동의하면 button 활성

<tempalete>
 <div id="app">
  <input type="checkbox" id="check1" v-model="checkAgree">
  <button v-bind:disable="checkAgree==false">송신</button>
 </div>
</template>


<script>
 new vue ({
  el: "#app",
  data: {
   checkAgree: false  
  }
 })
</script>

라디오

<tempalete>
 <div id="app">
  <input type="radio" id="radio1" value="빨강" v-model="radioVal">
  <label for="radio1">빨강</label>
  <input type="radio" id="radio2" value="오렌지" v-model="radioVal">
  <label for="radio2">오렌지</label>
  <input type="radio" id="radio3" value="노랑" v-model="radioVal">
  <label for="radio3">노랑</label>
  <p>선택 {{radioVal}}</p>
 </div>
</template>


<script>
 new vue ({
  el: "#app",
  data: {
   radioVal: []
  }
 })
</script>

Select

<template>
 <div id="app">
   <select v-model="selectVal">
    <option disable value="">선택해주세요</option>
    <option>red</option>
    <option>orange</option>
    <option>yellow</option>
    <option>green</option>
  </select>

  <p>선택: {{ selectVal}}</p>
 </div>
</template>


<script>
 new vue ({
  el: "#app",
  data: {
   selectVal:"";
  }
 })
</script>

select 복수선택

<template>
 <div id="app">
   <select multple v-model="selectVals" >
    <option disable value="">선택해주세요</option>
    <option>red</option>
    <option>orange</option>
    <option>yellow</option>
    <option>green</option>
  </select>

  <p>선택: {{ selectVals}}</p>
 </div>
</template>


<script>
 new vue ({
  el: "#app",
  data: {
   selectVals:[];
  }
 })
</script>

v-modal 에 수식어를 붙이면 몇가지 기능을 지정하는 것이 가능

//입력 왼료후 인트턴트 데이터에 입력하고 싶을때
<input v-model.lazy="프로퍼티명">

//입력 내용을 자동으로 수식으로 변경
<input v-model.number="프로퍼티명">

//앞 뒤 공백제거
<input v-model.trim="프로퍼티명" />

<template>
 <div id="app">
   <input v-model.lazy="txtVal">
   <p>입력후 표시: {{ txtVal }}</p>

   <input type="number" v-model.number="numberVal" />
   <p>100을 더해서 표기: {{ 100 + numberVal }}</p>

   <input v-model.trim="trimVal" />
   <p>공백제거 {{ tetVal }}</p>
 </div>
<template>


<script>
 new Vue({
  el:"#app",
  data:{'
   txtval: "",
   numberVal:0,
   tetVal:""
  }
 })
</script>