Vue가 HTML을 그리는 방식은 DOM을 속성으로 제어하는 것입니다. PHP나 JAVA 같은 서버단 언어처럼 텍스트를 출력해서 HTML을 그리는 것이 아니죠.
a 태그를 선택적으로 사용할 때가 좀 난감합니다. URL 값이 있으면 a 태그를 사용해 제목을 표시하고, 없으면 그냥 span이나 div를 이용해서 스타일만 매겨야 하는 경우가 있는데요. 보통은 아래처럼 썼습니다.
<a v-if='item.url' :href='item.url' class='my-class'>{{ item.title }}</a>
<span v-if='!item.url' class='my-class'>{{ item.title }}</span>그런데 is 속성을 쓴다면 어떨까요? is는 Vue용으로 작성한 태그를 렌더링 시점에 다른 태그로 변경할 때 사용하는 속성입니다.
아래 코드를 봅시다. ul 안에 draggable이라는 커스텀 태그가 들어 있어 렌더링 오류가 발생할 수 있는 상황이죠. 이 때 is='li'라고 쓰면 draggable이라는 커스텀 태그가 li로 변경돼 렌더링됩니다.
<ul>
<draggable is='li' v-for='item in items' :key='item.id'>
{{ item.title }}
</draggable>
</ul>그렇다면, 선택적 a 태그에도 is를 사용할 수 있지 않을까요?
아래처럼 :is로 속성값을 동적으로 만들고, url이 있으면 a를, 없으면 span을 리턴하게 하는 것입니다.
<a :is="item.url ? 'a' : 'span'"
:href="item.url">{{ item.title }}</a>맞습니다. 잘 됩니다.
이제 선택적으로 태그를 바꿔야 할 때 굳이 코드를 반복 작성하지 않아도 됩니다.
댓글 남기기