select

<template>
  <div>
    <!-- v-model로 양방향 데이터 바인딩 가능 -->
    <!-- 값 바뀔 때마다 selectedCity도 변경됨 -->
    <select name="" id="" v-model="selectedCity">
      <option value="02">서울</option>
      <option value="042">대전</option>
      <option value="064">제주</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 02로 설정하면 select 첫 선택은 '서울'로 되어있음
      selectedCity: '02'
    }
  }
}
</script>

<style>

</style>

• select 태그에 v-model 넣기
• option 변경될 때마다 selectedCity 변경
• selectedCity에 초기값 넣어주면 해당 값을 초기 화면에 출력
  

checkbox

<template>
  <div>
    <div>
      <!-- input id와 label for 맞추기 -->
      <!-- checked된 value로 양방향 데이터 바인딩 -->
      <input
        type="checkbox"
        id="html"
        value="HTML"
        v-model="favoriteLang">
      <label for="html">HTML</label>
    </div>
    <div>
      <input
        type="checkbox"
        id="css"
        value="CSS"
        v-model="favoriteLang">
      <label for="css">CSS</label>
    </div>
    <div>
      <input
        type="checkbox"
        id="js"
        value="JS"
        v-model="favoriteLang">
      <label for="js">JavaScript</label>
    </div>
    <div>선택한 언어: {{favoriteLang}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // checkbox의 value와 같은 값 있으면 체크 된 상태로 시작
      favoriteLang: ['JS']
    }
  }
}
</script>

<style>

</style>

• input의 id와 label의 for 맞추기
• checked 된 value로 양방향 데이터 바인딩
• checkbox는 여러개 선택 가능하므로 favoriteLang은 배열의 형태
• data인 favoriteLang 초기값으로 checkbox의 value와 같은 값 넣으면 체크 된 상태로 시작
  

radio

<template>
  <div>
    <div>
      <!-- checkbox와 type만 다름 -->
      <input type="radio" name="" id="html" value="HTML" v-model="favoriteLang">
      <label for="html">HTML</label>
    </div>
    <div>
      <input type="radio" name="" id="css" value="CSS" v-model="favoriteLang">
      <label for="css">CSS</label>
    </div>
    <div>
      <input type="radio" name="" id="js" value="JS" v-model="favoriteLang">
      <label for="js">JavaScript</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // radio는 하나만 선택 가능하므로 string으로 변경
      favoriteLang: ''
    }
  }
}
</script>

<style>

</style>

• templete에서는 checkbox와 동일하고 type만 다름
• radio는 하나만 선택이 가능하므로 favoriteLang은 string
  

router와 App.vue에 select, checkbox, radio 추가하는 것 잊지 않기!!!