vueJS를 사용하여 사용자에게 데이터를 입력받을 때 사용하는 요소에 대해서 각 속성 및 이벤트를 v-bind와 v-on으로 바인딩 하여 상호작용합니다.
-
v-bind
속성에 적용시 v-bind:class="" 와 :class="" 두가지 방식이 있습니다.
요소가 가지는 다양한 속성값에 대해서 바인딩할 수 있으며 바인딩시 해당 컴포넌트의 변수를 대입할 수 있게 됩니다. -
v-on
v-on:clik=""과 @click="" 두가지 방식이 있습니다.
요소 안에서 일어나는 다양한 이벤트에 대해서 컴포넌트의 메소드를 등록해 둘 수 있습니다.
또한 데이터의 입력을 받기 위해 v-model 속성을 사용하는데 해당 속성은 다음과 같은 의미를 가집니다.
<!-- searchText 의 초기 값이 표시 되며 수정시 해당 변수의 정보가 변경됩니다. -->
<input v-model="searchText" />
<input :value="searchText" @input="searchText = $event.target.value"/>## input 요소
select
// script
export default {
setup(){
let selectValue = ref("")
const selectList = ['첫번째','두번째','세번째']
return {
selectValue,
selectList
}
}
}<!-- template -->
<select v-model="selectValue" >
<option value="">선택하세요</option>
<option value="첫번째">첫번째</option>
<option value="두번째">두번째</option>
<option value="세번째">세번째</option>
</select>
<select v-model="selectValue" >
<option value="">선택하세요</option>
<option v-for="value in selectList" :value="value">{{ value }}</option>
</select>해당 select 요소의 초기 값은 selectValue의 초기화값이 되며 이때에는 선택하세요 가 기본으로 선택 되게 된다.
input type="checkbox"
// script
export default {
setup(){
let selectValue = ref([])
const selectList = ['첫번째','두번째','세번째']
return {
selectValue,
selectList
}
}
}<!-- template -->
<input id="select1" type="checkbox" v-model="selectValue" value="첫번째"><label for="select1">첫번째</label>
<label><input id="select2" type="checkbox" v-model="selectValue" value="두번째">두번째</label>
<input id="select3" type="checkbox" v-model="selectValue" value="세번째">세번째
다음과 같이 선택상자에서는 selectValue의 타입이 리스트여야 한다.
빈 문자열일 경우 아무것도 선택되지 않는다.
selectValue = ['첫번째'] 로 초기화 할 경우 첫번째 선택상자가 선택된 상태가 기본으로 된다.
label 요소는 for 속성을 통해 매칭되는 id의 checkbox를 변화시킨다
input type="radio"
// script
export default {
setup(){
let selectValue = ref("")
const selectList = ['첫번째','두번째','세번째']
return {
selectValue,
selectList
}
}
}<!-- template -->
<input name="select" id="select1" type="radio" v-model="selectValue" value="첫번째"><label for="select1">첫번째</label>
<label><input name="select" id="select2" type="radio" v-model="selectValue" value="두번째">두번째</label>
<input name="select" id="select3" type="radio" v-model="selectValue" value="세번째">세번째
같은 그룹 내 하나만 선택 가능한 요소입니다.
selectValue의 타입은 string 이여야 하며 빈 문자열인 경우 아무것도 선택되지 않습니다.
해당 기능으로 두가지 선택에서 true 혹은 false 및 0 또는 1로 값이 들어 오도록 하고 싶은 경우 아래와 같이 value 값을 바인딩 해주면 됩니다.
<!-- template -->
<input name="select" id="select2" type="radio" v-model="selectValue" :value="true">켜기
<input name="select" id="select3" type="radio" v-model="selectValue" :value="false">끄기
input type="time"
// script
export default {
setup(){
let time = ref("22:00")
return {
time
}
}
}<!-- template -->
<input type="time" v-model="time">
입력값은 string 형태로 작성되며 초기값을 위와 같이 넣어줄 수 있습니다.
input type="date"
// script
export default {
setup(){
let date = ref("2022-12-25")
const min = ref("2000-01-01")
const max = ref("2030-12-31")
return {
time,
max,
max
}
}
}<!-- template -->
<input type="date" v-model="date" :min="min" :max="max">
날짜 정보도 다음과 같인 바인딩 할 수 있다.
동일하게 string 타입을 가진다.
- html 요소(Elements & Attributes) 총정리
https://heropy.blog/2019/05/26/html-elements/
https://www.w3schools.com/tags/tag_base.asp
