회사 프로젝트 중 필요한 Vue문법을 잘 설명한 블로그가 있어 글 남긴다.
https://cjw-awdsd.tistory.com/33
중간에 오타가 있는데, 아래에서 v-bind
5. 입력 폼 연결
v-bind
v-bind를 통해 input에서 입력한 값을 프로퍼티에 저장가능하다. 다양한 예제를 아래와 같이 다 입력해놨다.
<body>
<h2>입력한 문자열을 표시하는 예제</h2>
<div id="app">
<!--v-model을 사용해 프로퍼티에 값을 input값으로 저장가능-->
<input v-model="input_model" placeholder="이름">
<p>input model : {{input_model}}</p>
<!--lazy는 input의 포커스를 다른곳으로 이동할 때 프로퍼티에 저장하는 기능-->
<input v-model.lazy="input_model2">
<p>input lazy model : {{input_model2}}</p>
<!--textarea에서도 v-model 사용가능-->
<textarea v-model="textarea_model"></textarea>
<p>textarea model : {{textarea_model}}</p>
<!--checkbox에서 사용 예제 저장된 프로퍼티를 v-bind를 통해 로직 실행가능-->
<input type="checkbox" v-model="checkbox_model" value="awd">
<button v-bind:disabled="checkbox_model === false">disabledd</button>
<p>checkbox model : {{checkbox_model}}</p>
<!--프로퍼티를 배열로 선언하면 value값을 저장-->
<input type="checkbox" v-model="checkbox_model2" value="test1">
<input type="checkbox" v-model="checkbox_model2" value="test2">
<p>checkbox model : {{checkbox_model2}}</p>
<!--라디오 프로퍼티 저장-->
<input type="radio" v-model="radio_model" value="test1">
<input type="radio" v-model="radio_model" value="test2">
<input type="radio" v-model="radio_model" value="test3">
<p>radio model : {{radio_model}}</p>
<!--select 프로퍼티 저장-->
<select v-model="select_model">
<option>test1</option>
<option>test2</option>
</select>
<p>select model : {{select_model}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
input_model:'',
input_model2:'',
textarea_model:'',
checkbox_model:false,
checkbox_model2:[],
radio_model:'',
select_model:''
}
})
</script>
</body>'FrontEnd' 카테고리의 다른 글
| VSCode 단축키 (0) | 2024.05.18 |
|---|---|
| 웹 소켓에 대하여(ing) (0) | 2024.04.03 |
| npm에 대하여 (0) | 2024.03.02 |
