[Vue.js] 셀렉트 박스를 이용한 선택 옵션 구현

<template>
  <div>
    <!-- 예제 1: 선택된 항목을 표시하는 부분 -->
    <div>선택됨: {{ selected }}</div>

    <!-- 예제 2: 셀렉트 박스 -->
    <select v-model="selected">
      <option disabled value="">다음 중 하나를 선택하세요</option>
      <option>가</option>
      <option>나</option>
      <option>다</option>
    </select>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 선택된 옵션을 저장하는 ref
    const selected = ref('');

    return {
      selected
    };
  }
};
</script>

Vue에서 셀렉트 박스를 사용하여 여러 옵션 중 하나를 선택할 수 있습니다. 사용자는 드롭다운 메뉴에서 옵션을 선택하고, 선택한 옵션을 v-model 디렉티브를 사용하여 데이터에 바인딩할 수 있습니다.

1. 예제 1: 선택된 항목을 표시하는 부분입니다. 사용자가 셀렉트 박스에서 옵션을 선택하면 선택된 옵션을 표시합니다.

2. 예제 2: 셀렉트 박스를 보여주는 부분입니다. 각 옵션은 <option> 태그로 표현되며, 첫 번째 옵션은 "다음 중 하나를 선택하세요"로 사용자에게 안내 메시지를 표시합니다. 사용자는 여기서 원하는 옵션을 선택할 수 있습니다.

셀렉트 박스를 사용하면 사용자가 여러 옵션 중 하나를 쉽게 선택할 수 있으며, 선택한 값을 효과적으로 관리할 수 있습니다.