셀렉트 (Select)

셀렉트 필드 컴포넌트는 옵션 목록에서 사용자가 제공하는 정보를 수집하는데 사용됩니다.

사용법


API

v-select

보충

Mask legend
MaskDescription
Masks
#Any digit
AAny capital letter
aAny small letter
NAny capital alphanumeric character
nAny small alphanumeric character
XAny special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space
Pre-made
credit-card#### - #### - #### - ####
date-with-time##/##/#### ##:##
phone(###) ### - ####
social###-##-####
time##:##
time-with-seconds##:##:##

예제

라이트 테마 (Light theme)

표준 단일 셀렉트는 다양한 설정 옵션을 가지고 있습니다.


아이콘 (Icons)

앞이나 뒤에 커스텀 아이콘 붙이세요


복수선택 (Multiple)

multi-select 에서 선택된 항목들을 보여줄때 v-chip을 사용할 수 있습니다.


항목 텍스트와 값의 커스터마이즈 (Customized item text and value)

텍스트와 값 필드에 해당하는 항목 배열 내의 특정 속성을 지정할 수 있습니다. 기본값은 textvalue 입니다. 이 예제에서는 선택된 아이템의 전체 오브젝트를 반환하는 return-opject prop을 사용합니다..


Prepend/Append item slotsNew in v1.2

The v-select components can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.


Change selection apperance

The selection scoped slot can be used to customize the way selected values are shown in the input. This is great when you want something like foo (+20 others) or don't want the selection to occupy multiple lines.