[맨땅에 VueJS]HTML 코드를 직접 template에 넣어주는 v-html / VueJS Directive

3 min readSep 23, 2018

data의 값을 출력하는 데에 관련이 있는 디렉티브의 마지막, 바로 v-html 디렉티브입니다. v-html 은 이름을 통해 예상되듯이 HTML 코드를 직접적으로 입력해줄 때 사용되는 디렉티브입니다.

우리가 만약 HTML 코드 자체를 data 내에 선언해주고 해당 값을 HTML 코드의 형태로 출력해줘야한다면 어떻게 해야할까요? v-html 을 모르는 상태라면 아마 아래와 같이 시도해볼 수 있을 겁니다.

결과에서 볼 수 있듯이 HTML 코드가 아닌 문자열(String)의 형태로 출력이 되어버립니다. Vue의 입장에서는 이것이 HTML 코드인지, 문자열인지 구분할 수 있는 방법이 전혀 없으니 당연한 결과입니다.

이럴 때 사용하는 것이 바로 v-html 디렉티브입니다.

[HTML]

[JavaScript]

위의 시도와 비교해보면{{ aLinkToMedium }}를 p태그 안에 직접 넣어주지 않고 v-html 디렉티브를 사용하여 p태그의 속성값으로 aLinkToMedium 를 넣어주었습니다.

<p v-html="aLinkToMedium"></p>

그러자 결과값은?

보시는 것처럼 aLinkToMedium가 문자열이 아닌 HTML 코드로 삽입 된 것을 보실 수 있습니다.

크롬의 요소검사를 통해 삽입된 코드를 살펴보면

<p>
  <a href="http://medium.com">링크</a>
</p>

위 처럼 p 태그 안에 a 태그가 삽입된 것을 보실 수 있습니다.

우리는 지금까지 v-bind, v-once, v-html 과 같이 값을 렌더링할때 필요한 디렉티브에 대해 알아보았습니다. 다음엔 이벤트와 관련이 있는 v-on 디렉티브에 대해 알아보도록 하겠습니다.

이벤트 리스너 v-on / VueJS Directive / [맨땅에 VueJS]

medium.com