728x90
반응형
입력폼을 데이터와 연결하기 : v-model
ex) <태그명 v-model="프로퍼티명">
- 텍스트 입력받는 input 태그와 Vue의 데이터 연결

<body>
<div id="app">
<!--Vue와 입력 데이터 연결하기-->
<!--기존의 html 폼(value)
<input type="text" value="홍길동"> -->
이름 : <input v-model="myname"><br> <!--v-model 사용시에는 value가 먹히지 않는다.-->
입력한 이름 : {{myname}}
</div>
<script>
new Vue({
el : "#app",
data : {
myname : '홍길동'
}
})
</script>
</body>
- textarea 태그와 Vue의 데이터 연결

<body>
<div id="app">
<!--textarea 사용-->
<p>
입력한 문장 : <br>
<textarea cols="" rows="" v-model="mytext"></textarea><br>
문장 : {{mytext}}, {{mytext.length}}글자 입력됨
</p>
</div>
<script>
new Vue({
el : "#app",
data : {
myname : '홍길동',
mytext : ''
}
})
</script>
</body>
- checkbox 태그와 Vue의 데이터 연결


<body>
<div id="app">
<!--checkbox 사용-->
<p>
좋아하는 과일 선택<br>
<input type="checkbox" value="사과" v-model="fruits">사과
<input type="checkbox" value="키위" v-model="fruits">키위
<input type="checkbox" value="포도" v-model="fruits">포도
<input type="checkbox" value="오렌지" v-model="fruits">오렌지
<input type="checkbox" value="바나나" v-model="fruits">바나나 <br>
선택한 과일 {{fruits}}
<span v-html="fruits"></span><br> <!--{{데이터명}}와 같은 결과가 나옴-->
선택된 개수 : {{fruits.length}}개 선택됨
<!--이름이 같으면 그룹으로 묶임(선택 함과 아님으로만 구분 True/false)-->
<input type="button" value="2개 이상 선택되어짐" v-if="fruits.length>2">
</p>
</div>
<script>
new Vue({
el : "#app",
data : {
myname : '홍길동',
mytext : '',
fruits : [] //value의 값을 배열의 형태로 저장해옴
}
})
</script>
</body>
- button 태그와 Vue의 데이터 연결

<body>
<div id="app">
<!--체크하면 비활성화 시키기-->
<p>
체크하면 비활성화 시키기<br>
<input type="checkbox" v-model="myagree"> 동의합니다.
<!--v-bind:disabled="myagree==false"는 myagree값이 false와 같다면-->
<!-- 체크 하지 않았을 때 버튼의 글자 -> 동의하지 않음,
체크 했을 때 버튼의 글자 -> 동의함 으로 바뀌게 수정해보기 -->
<button v-bind:disabled="myagree==false">동의함</button>
<button v-bind:disabled="myagree==true">동의하지 않음</button> {{myagree}}
<button v-if="myagree==false">동의함</button>
<button v-else="myagree==true">동의하지 않음</button> {{myagree}}
<!--<input type="button" value="송신">-->
</p>
</div>
<script>
new Vue({
el : "#app",
data : {
myname : '홍길동',
mytext : '',
fruits : [], //value의 값을 배열의 형태로 저장해옴
myagree : false,
picked : 'red',
fileName : ''
}
})
</script>
</body>
- radio 태그와 Vue의 데이터 연결


<body>
<div id="app">
<!--라디오 버튼 사용-->
<p>
선택한 라디오 버튼을 표시하는 예제 <br>
<label><input type="radio" value="red" v-model="picked">적</label><br>
<label><input type="radio" value="green" v-model="picked">녹</label><br>
<label><input type="radio" value="blue" v-model="picked">청</label><br>
{{picked}}이 선택됨
</p>
<p>
이미지 출력을 라디오 버튼으로 변경하는 예제
<input type="radio" value="source/face1.png" v-model="fileName">face1
<input type="radio" value="source/face2.png" v-model="fileName">face2<br>
선택된 이미지 : {{fileName}}<br>
<img v-bind:src="fileName"></img>
</p>
</div>
<script>
new Vue({
el : "#app",
data : {
myagree : false,
picked : 'red',
fileName : ''
}
})
</script>
</body>
- select 태그와 Vue의 데이터 연결

<body>
<div id="app">
<!--select 사용-->
<p>
좋아하는 색 선택 <br>
<select v-model="myColor" v-bind:style="{color:myColor}" size=3 multiple>
<option disabled value="색을 선택하세요">색을 선택하세요</option>
<option>red</option>
<option>green</option>
<option>blue</option>
<option>orange</option>
<option>brown</option>
</select>
선택된 색은 <span v-bind:style="{color:myColor}"> {{myColor}} </span> 입니다.
</p>
</div>
<script>
new Vue({
el : "#app",
data : {
myColor : '',
myNumber : 0
}
})
</script>
</body>
- 수식어 [ .lazy, .number, .trim ]

입력 후 아무 곳이나 클릭해보면 공백이 잘려있다.

<body>
<div id="app">
<!--수식어 lazy : 다 쓰고 나서 Vue에 데이터 입력-->
<p><
다 쓰고 나서 Vue에 데이터 입력<br>
이름 : <input v-model.lazy="myname"><br>
입력한 이름 : {{myname}}
</p>
<!--수식어 number : 입력된 값 수식으로 변경-->
<p>
입력된 값 수식으로 변경<br>
<input v-model.number="myNumber"> 입력된 값에 5 더하기 : {{5+myNumber}}<br> <!--주로 .number쓰는 방법을 사용함-->
<input v-model="myNumber"> 입력된 값에 5 더하기 : {{parseInt(myNumber)+5}}<br>
<input type="number" v-model="myNumber"> 입력된 값에 5 더하기 : {{myNumber+5}}
</p>
<!--수식어 trim : 앞뒤 공백을 자동 제거-->
<p>
앞뒤 공백을 자동 제거<br>
이름 : <input v-model.trim="myname"><br>
입력한 이름 : {{myname}}
</p>
</div>
<script>
new Vue({
el : "#app",
data : {
myname : '홍길동',
myNumber : 0
}
})
</script>
</body>
728x90
반응형