[Vue] 데이터 바인딩

Text binding

<!-- 문자열 보간법{{ }}(Mustache)를 사용한 텍스트 보간법 -->
<span>{{message}}</span>

<!-- 원시 HTML v-text -->
<span v-text="message"></span>

<!-- v-html -->
<span v-html="message"></span>

 

Attribute binding 

v-bind
: 단방향으로만 데이터 바인딩을 수행함

 data나 속성이 변경되면 UI를 갱신함

<!-- v-bind -->
<input type="text" v-bind:id="inputId"/>

<!-- :으로 단축 -->
<input type="text" :id="inputId"/>
<input type="text" :class="classObj"/>

<!-- 동적 인자 -->
<input type="text" :[key]="inputId"/>

 

폼 입력 바인딩

v-model

: 양방향 데이터 바인딩

<input type="text" v-model="message"/>

 

수식어

.lazy

입력폼에서 다른 요소로 포커스가 이동하는 이벤트가 발생할 때 입력한 값을 data와 동기화

 

.number

사용자 입력을 자동으로 숫자로 형 변환시켜줌

 

.trim

앞뒤 공백제거를 해줌

 

조건부 렌더링

<!-- v-if,v-else-if,lv-else -->
<span v-if="age < 10">10살 미만</span>
<span v-else-if="age >= 20"> 20세이상</span>
<span v-else>그 외</span>

<!-- v-show -->
<!-- 조건에 따라 화면을 보여줄지를 결정함 -->
<div v-show="isShow"> {{message}} </div>

<!-- v-for -->
<ul>
  <li v-for="{value, key, index} in areas" :key="key" :value="key">{{i}}</li>
</ul>

 

v-for에서 key를 사용해야 DOM Element를 이동시키지않고 data만 변경함