728x90
폼 입력과 데이터를 연결 할때는 v-model을 사용합니다.
v-model 디렉티브는 input태그, select 태그, textarea 태그를 사용합니다.
기본형)
<태그명 v-model="프로퍼티명">
코드를 작성 해보겠습니당
<body>
<h2>입력한 문장과 문자수를 표시하는 예제</h2>
<div id="app">
<textarea v-model="myText"></textarea>
<p>문장은, 「{{ myText }}」</p>
<p>문자의 개수는 {{ myText.length }} 자 입니다.</p>
</div>
<script>
new Vue({
el:'#app',
data:{
myText:'오늘 날씨 좋습니다.'
}
})
</script>
</body>
</html>| 출력결과 |
 |
체크박스 : input checkbox
체크박스의 값을 Vue 데이터와 연결합니다.
기본형)
<labe><input type="checkbox" v-model="프로퍼티명"> 어쩌구 </label>
체크박스의 on/off 를 확인합니다.
<h2> 체크박스의 on/off를 확인하는 예제</h2>
<div id="app">
<label><input type="checkbox" value="check" v-model="myCheck">
체크박스의 상태는 {{ myCheck }}</label>
</div>
<script>
new Vue({
el: '#app',
data:{
myCheck:false
}
})
</script>| 출력결과 |
 |
체크박스를 누르면 해당 체크박스의 값을 출력할수있습니다.
<h2>복수 체크박스의 on을 배열로 만드는 예제</h2>
<div id='app'>
<label><input type="checkbox" value="red" v-model="myChecks">적색</label><br>
<label><input type="checkbox" value="green" v-model="myChecks">녹색</label><br>
<label><input type="checkbox" value="blue" v-model="myChecks">청색</label><br>
선택한 색은 <br> {{myChecks}}
</div>
<script>
new Vue({
el:'#app',
data:{
myChecks:[]
}
})
</script>
| 출력결과 |
 |
동의에 체크하면 송신버튼이 활성화 되게 할수있습니다.
<h2>동의에 체크하면 송신 버튼이 활성화 되는 예제</h2>
<div id="app">
<label><input type="checkbox" v-model="myAgree">동의합니다.</label>
<button v-bind:disabled="myAgree==false">송신</button>
</div>
<script>
new Vue({
el:'#app',
data:{
myAgree:false
}
})
</script>| 출력결과 |
 |
선택한 radio 버튼을 표시할수 있습니다.
<body>
<h2>선택한 라디오 버튼을 표시하는 예제</h2>
<div id="app">
<label><input type="radio" value="red" v-model="picked">적색</label>
<label><input type="radio" value="green" v-model="picked">녹색</label>
<label><input type="radio" value="blue" v-model="picked">청색</label>
<p>{{ picked }} 이 선택됨</p>
</div>
<script>
new Vue({
el:'#app',
data:{
picked:'blue'
}
})
</script>
| 출력결과 |
 |
이미지 출력을 라디오 버튼으로 변경하여 나타낼수 있습니다.
<body>
<h2>이미지 출력을 라디오 버튼으로 변경하는 예제</h2>
<div id="app">
<label><input type="radio" value="images/4.jpg" v-model="fileName">몽실1</labe><br>
<label><input type="radio" value="images/5.jpg" v-model="fileName">몽실2</labe><br>
<label><input type="radio" value="images/6.jpg" v-model="fileName">몽실3</labe><br>
<label><input type="radio" value="images/7.jpg" v-model="fileName">몽실4</labe><br>
<p> {{ fileName }} </p>
<img v-bind:src="fileName"></img>
</div>
<script>
new Vue({
el:'#app',
data:{
fileName:''
}
})
</script>| 출력결과 |
 |
문자열이 select의 옵션으로 인해 설정된 색으로 변하게 할수 있습니다.
<h2>문자열이 선택한 색으로 변하는 예제</h2>
<div id="app">
<select v-model="myColor">
<option disabled value="">색을 선택해 주세요</option>
<option>red</option>
<option>orange</option>
<option>yellow</option>
<option>green</option>
<option>skyblue</option>
<option>blue</option>
<option>purple</option>
</select>
<p v-bind:style="{color:myColor}">선택한 색상은 {{ myColor }} 입니다.</p>
</div>
<script>
new Vue({
el: "#app",
data: {
myColor:'',
}
})
</script>| 출력예시 |
 |
해당 코드에 select의 v-model뒤에 multiple을 부여하면 여러 옵션을 동시선택이 가능합니다.
<h2>문자열이 선택한 색으로 변하는 예제</h2>
<div id="app">
<select v-model="myColor" multiple>
<option disabled value="">색을 선택해 주세요</option>
<option>red</option>
<option>orange</option>
<option>yellow</option>
<option>green</option>
<option>skyblue</option>
<option>blue</option>
<option>purple</option>
</select>
<p>선택한 색상은 {{ myColor }} 입니다.</p>
</div>
<script>
new Vue({
el: "#app",
data: {
myColor:'',
}
})
</script>
수식어
입력이 끝나고 Vue인스턴스 데이터에 입력 하고싶을때
<input v-model.lazy="프로퍼티명">
입력 내용을 자동으로 수식으로 변경 하고싶을때
<input v-model.number="프로퍼티명">
앞뒤 공백을 자동으로 제거하고 싶을 때
<input v-model.trim="프로퍼티명">
입력이 끝난후, focus가 벗어날때 입력이 되게 할때의 코드입니다.
<body>
<h2>다 쓴 후 입력이 되는 예제</h2>
<div id="app">
<input v-model.lazy="myText">
<p>입력 후 표시 「{{ myText }}」</p>
</div>
<script>
new Vue({
el:'#app',
data:{
myText:''
}
})
</script>
입력을 자동으로 수식으로 받아서 계산까지 가능하게 하는 예제입니다.
<h2>입력을 자동으로 수식으로 변경하게 하는 예제</h2>
<div id="app">
<input v-model.number="myNumber" type="number">
<p>100을 더해서 표시 「{{ myNumber + 100 }}」</p>
</div>
<script>
new Vue({
el:'#app',
data:{
myNumber:0
}
})
</script>
</body>
앞 뒤의 공백을 제거할수도 있습니다!
<h2>앞 뒤의 공백을 자동으로 제거(trim)하는 예제</h2>
<div id="app">
<input v-model.trim="myText">
<p>앞뒤 공백을 제거 「{{ myText }}」</p>
</div>
<script>
new Vue({
el:'#app',
data:{
myText:''
}
})
</script>
마무리 실습.
따라 출력해보세요!
<body>
<h2>입력폼 활용</h2>
<div id="app">
<p>이름 : <input type="text" v-model.lazy="myName" placeholder="홍길동"></p>
<p>좋아하는 색은 : {{ myColor }}<br><br>
<label><input type="radio" value="red" v-model="myColor">빨강<br></label>
<label><input type="radio" value="green" v-model="myColor">녹색<br></label>
<label><input type="radio" value="blue" v-model="myColor">파랑<br></label>
<label><input type="radio" value="yellow" v-model="myColor">노랑<br></label>
<label><input type="radio" value="gray" v-model="myColor">회색<br></label>
<p>제 이름은 {{myName}} 이고, 좋아하는 색은 {{ myColor }}입니다. </p>
</div>
<script>
new Vue({
el:"#app",
data:{
myColor: '',
myName:'',
}
})
</script>
</body>
</html>
728x90
'Vue.js' 카테고리의 다른 글
| 키 입력을 Vue인스턴스의 메소드에 연결하기(Vue.js) (0) | 2022.12.22 |
|---|---|
| 이벤트와 연결하기 : v-on (Vue.js) (0) | 2022.12.22 |
| v-bind를 이용한 클래스 지정(Vue.js) (0) | 2022.12.22 |
| 요소의 속성을 데이터로 지정하는 v-bind( Vue.js) (0) | 2022.12.21 |
| Vue 인스턴스 만들기 - Vue.js 기초 (0) | 2022.12.21 |