[VUE] V-MODEL

v-model은 다양한 유형은 엘리멘트에 사용가능하며, 엘리멘트에 바인딩된 변수의 상태를 업데이트해줌

기본 사용법

텍스트

<p>메세지: {{ message }}</p>
<input v-model="message" placeholder="메세지 입력하기" />

여러 줄 텍스트

<span>여러 줄 메세지:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="여러 줄을 추가해보세요"></textarea>

새로운 발견 : white-space: pre-line; !!!! // pre를 안쓸 땐 이걸로 textarea를 대체가능 

<textarea> 내부에 이중 중괄호 문법은 작동하지 않으므로 v-model을 사용해야 합니다.

<!-- 잘못된 사례 -->
<textarea>{{ text }}</textarea> X

<!-- 올바른 사례 -->
<textarea v-model="text"></textarea> O

체크박스
단일 체크박스는 불리언을 값을 사용합니다:

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

return false // default = false 

배열 또는 Set에 여러 개의 체크박스 값을 바인딩할 수도 있습니다.

export default {
  data() {
    return {
      checkedNames: []
    }
  }
}
<div>체크된 이름: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="젝" v-model="checkedNames">
<label for="jack">젝</label>

<input type="checkbox" id="john" value="존" v-model="checkedNames">
<label for="john">존</label>

<input type="checkbox" id="mike" value="마이크" v-model="checkedNames">
<label for="mike">마이크</label>

return 체크된 이름: [ "존", "마이크", "젝" ]
= 풀이 : checkedNames.push(v-model.target.value)

이 경우 checkedNames 배열은 항상 현재 체크된 순서대로 값을 포함합니다.

라디오

<div>선택한 것: {{ picked }}</div>

<input type="radio" id="one" value="하나" v-model="picked" />
<label for="one">하나</label>

<input type="radio" id="two" value="둘" v-model="picked" />
<label for="two">둘</label>

셀렉트
단일 셀렉트:

<div>선택됨: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">다음 중 하나를 선택하세요</option>
  <option>가</option>
  <option>나</option>
  <option>다</option>
</select>

// ios에서는 필수로 disabled option을 첫번째에 설정 해줘야 한다.

다중 선택(배열로 바인딩 됨)

<div>선택됨: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>가</option>
  <option>나</option>
  <option>다</option>
</select>
return : [가,나,다]