동적 속성 바인딩(콜론(:), v-bind 디렉티브) / 조건부 할당

Vue에서 동적 속성 바인딩을 수행할 때 사용하는 콜론(:)은 "v-bind" 디렉티브라고 불립니다.

"v-bind" 디렉티브를 사용하면 Vue 템플릿에서 HTML 속성에 동적으로 값을 바인딩할 수 있습니다. 주로 HTML 속성을 Vue 컴포넌트의 데이터나 계산된 속성과 연결할 때 사용됩니다.

 

조건문과 삼항 연산자를 사용하여 조건부 할당이 가능합니다.

 

예제) 다양한 속성의 예시

<!-- class -->
<div
  class="div"
  :class="
    newFlag
      ? file.flag !== undefined
        ? 'active'
        : null
      : file.type === 'File'
      ? fileStore.fileId === file.title
        ? 'active'
        : null
      : fileStore.directiveId === file.title
      ? 'active'
      : null
  "
></div>

<!-- event -->
<button @click="condition ? clickA() : clickB()"></button>

<!-- text -->
<select id="menuId" v-model="datas.menuId">
    <option
      v-for="(item, idx) in datas.menus"
      :key="idx"
      :value="datas.type == 'a' ? item.AId : item.BId"
    >
      {{ datas.type === 'a' ? item.AId : item.BId }}
    </option>
</select>

<!-- style -->
<li :style="{ visibility: item.children !== undefined ? 'visible' : 'hidden' }"></li>