2.0
Vue 3.0데이터 값을 ref을 이용하여 value 값 변화시 , 화면에 출력을 동시에 할 수 있다.
하지만,
input (화면) 상에서 value 변경시,데이터 값도 자동적으로 바뀌게 하려면 onInput 을 이용하여, value 값의 변동이 있을때마다 함수를 실행시키고, 함수내에 변수를 업데이트 하는 방식을 사용했어야한다
단방향 바인딩 에서;
v-model 을 이용하면, 화면상에서 데이터변화를 함수 작동을 하지 않아도, 알아서 값이 변동한다 ( 양 방향 바인딩 )
<input v-model="name" // 바인딩 할 변수 선택 type="text" setup () { const name = ref('smurf'); }
- 끝 ( input 에서 name 변경 가능 / 데이터에서도 name 변경 가능(name.value 잊지말것)
- v-for 를 이용해서, 객체나 배열에 담긴 값을 화면에 출력할 수있다
(리액트의 map보다 덜번거로움 )<div v-for="element in arrays" :key="element.id" const array = [ { id :Date.now(),two:2,three:3...}, { id :Date.now(),two:2,three:3...}, { id :Date.now(),two:2,three:3...}, { id :Date.now(),two:2,three:3...}, ..., ] // element 개수만큼 div 개수 생성
true/false 따라서 태그를 보여주고 싶을 때 사용한다.
- v-show :
<div v-show="toggle">
<div v-show="!toggle">
- v-for :
<div v-if="toggle">
<div v-else>
차이점 :v-show는 div 렌더링을 둘 다 한뒤, 겹친후에 toggle에 따라서 display:none으로 가려준다. v-if는 값에따라 div 한개만 렌더링 한다
- v-if는 런타임중 조건이 거의 변하지 않을 때 사용하기 좋고
- v-show는 토글이 자주바뀌는 값일 때 사용하기 좋다.
- v-model은 input의 type에 따라 다루는게 다르다.
checkbox type 인 경우, v-model="true/false"값에 따라 checked에 상태를 바꿀 수 있다.
gpt쌤의 설명;
다음은 v-model이 각 입력 요소에서 어떤 속성을 관리하는지에 대한 간단한 요약입니다.
// text, textarea, password 등의 입력 요소: value 속성을 관리합니다.
// checkbox와 radio: checked 속성을 관리합니다.
// select 요소: 선택된 option의 value 속성을 관리합니다.
// 파일 입력 요소: 선택된 파일의 FileList 객체를 관리합니다.
<!-- text input -->
<input type="text" v-model="textValue">
<!-- checkbox input -->
<input type="checkbox" v-model="isChecked">
<!-- radio input -->
<input type="radio" value="A" v-model="selectedOption">
<input type="radio" value="B" v-model="selectedOption">
<!-- select input -->
<select v-model="selectedOption">
<option value="A">Option A</option>
<option value="B">Option B</option>
</select>
<!-- file input -->
<input type="file" v-model="selectedFile">