VueJS - 5. HTML 코드를 직접 template에 넣어주는 v-html / VueJS Directive

개발/vue.js

devsu 2020. 7. 9. 22:11

아래 글을 따라하며 VueJS에 적응하기

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

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

medium.com

요약

<HTML코드 자체를 data 내에 선언해주고 해당 값을 HTML 코드의 형태로 출력하기>

v-html 디렉티브를 사용한다.

[HTML]

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <p v-html="aLinkToMedium"></p>
</div>

[JavaScript]

new Vue({ 
  el: "#app", 
  data: {
    aLinkToMedium: "<a href='http://medium.com'>링크</a>"
  }
})

- 실제 실행 화면