form 요소 활용하기
- form 요소와 데이터 간의 연결은 v-model로 양방향 바인딩
- text, <textarea>는 value 속성, input 이벤트
- checkbox, radio checked 속성, change 이벤트
- select는 value를 속성으로, change 이벤트
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<h1>Form Component</h1>
<hr>
<!--string-->
<div id="formtest">
<input type="text" v-model="message" placeholder="TEXT를 입력하세요">
<p>입력된 메세지 : {{ message }}</p>
<textarea v-model="message2"></textarea>
<span>입력된 메세지</span>
<p>{{message2}}</p>
<!--checkbox-->
<input type="checkbox" v-model="checked">
<label for="checkbox">{{checked? '클릭함' : '해제함'}}</label>
<hr>
<br>여러분이 좋아하는 아티스트를 모두 고르시오.<br>
<input type="checkbox" value="Picasso" v-model="artist">Picasso
<input type="checkbox" value="Bach" v-model="artist">Bach
<input type="checkbox" value="Mozart" v-model="artist">Mozart
<br><span>현재 리스트: {{ artist }}</span>
</div>
</body>
<script>
var app9 = new Vue({
el: '#formtest',
data:{
message:'',
message2:'',
checked: false,
artist: [] //[]: 배열 표기
}
});
</script>
</html>
radio 버튼
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<h1>Form Component</h1>
<hr>
<!--string-->
<div id="formtest">
<!--radio-->
<span>오늘 저녁 뭐 사드릴까요?</span>
<input type="radio" v-model="dinner" value="e">양식
<input type="radio" v-model="dinner" value="k">한식
<input type="radio" v-model="dinner" value="j">중식
<br>당신의 선택 : {{ dinnerText }}
<hr>
</div>
</body>
<script>
var app9 = new Vue({
el: '#formtest',
data:{
dinner:'h',
},
//dinner의 값에 따라 return 되는 단어를 변화시킨다
computed: {
dinnerText(){
if(this.dinner == 'e') return '양식';
else if (this.dinner == 'k') return '한식';
else if(this.dinner == 'c') return '중식';
else return '';
}
}
});
</script>
</html>
Select
(1) Single
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<h1>Form Component</h1>
<hr>
<!--select-->
<select v-model="selected">
<option disabled value="">Select One</option>
<option>Baseball</option>
<option>Volleyball</option>
<option>Basketball</option>
</select>
<br>오늘 볼 스포츠 : {{selected}}
</div>
</body>
<script>
var app9 = new Vue({
el: '#formtest',
data:{
selected: ''
}
});
</script>
</html>
(2) 다중선택
- 컨트롤 버튼을 누른 후 선택한다
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<h1>Form Component</h1>
<hr>
<!--string-->
<div id="formtest">
<!--select-->
<select v-model="selected2" multiple>
<option disabled value="">Select One</option>
<option>Baseball</option>
<option>Volleyball</option>
<option>Basketball</option>
</select>
<br>오늘 볼 스포츠들 : {{selected2}}
</div>
</body>
<script>
var app9 = new Vue({
el: '#formtest',
data:{
selected2:[]
}
});
</script>
</html>
(3) 배열을 통한 select 만들기
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<h1>Form Component</h1>
<hr>
<!--string-->
<div id="formtest">
<select v-model="selected3">
<option v-for="option in option3" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br>오늘 들을 노래 : {{popText}}
<br><br><br><br><br>
</div>
</body>
<script>
var app9 = new Vue({
el: '#formtest',
data:{
selected3:'K',
option3:
[
{text: 'k-pop', value: 'K'},
{text: 'Old-pop', value: 'O'},
{text: 'Newage', value: 'N'}
]
},
computed: {
popText()
{
if(this.selected3 == 'K') return 'kpop';
else if(this.selected3 == 'O') return 'Old pop';
else if(this.selected3 == 'N') return 'Newage';
}
}
});
</script>
</html>
text에 숫자값으로 받기
- v-model.number 로 선언해준다
- parseInt로 형변환 한다
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<h1>Form Component</h1>
<hr>
<!--string-->
<div id="formtest">
당신의 현재 나이 : <input type="text" v-model.number="age">
이 약을 먹으면 달라지는 나이 : {{ parseInt(age) + 3 }}<br>
이 약을 먹으면 달라지는 나이 : {{ age + 3 }}<br>
<br><br><br><br><br>
</div>
</body>
<script>
var app9 = new Vue({
el: '#formtest',
data:{
age: ''
}
});
</script>
</html>text에 Trim 하는 법
- v-model.trim 이용
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<h1>Form Component</h1>
<hr>
<!--string-->
<div id="formtest">
당신의 이름을 입력하시오 : <input type="text" v-model.trim="name"><br>
당신의 이름은 : {{name}}<br>
<br><br><br><br><br>
</div>
</body>
<script>
var app9 = new Vue({
el: '#formtest',
data:{
name: ''
}
});
</script>
</html>
'자바 공부 > [자바] 기본 공부' 카테고리의 다른 글
| [Vue.js] Vue Router (0) | 2024.12.05 |
|---|---|
| [Vue.js] 섭씨 화씨 계산기 만들기 (0) | 2024.12.04 |
| [Vue.js] class 속성 변경하기 (0) | 2024.12.04 |
| [Vue.js] Methods, computed, watch (0) | 2024.12.03 |
| [Vue.js] Componenet (2) | 2024.12.03 |