아래 글을 따라하며 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>"
}
})
- 실제 실행 화면
'개발 > vue.js' 카테고리의 다른 글
| VueJS - 7. 템플릿에 직접 JavaScript 코드 넣기 (0) | 2020.07.09 |
|---|---|
| VueJS - 6. 이벤트 리스너 v-on / VueJS Directive (0) | 2020.07.09 |
| VueJS - 4. 일회성 디렉티브 v-once / VueJS Directive (0) | 2020.07.09 |
| VueJS - 3. HTML 속성에 접근 v-bind / VueJS Directive (0) | 2020.07.09 |
| VueJS - 2. VueJS Methods (0) | 2020.07.09 |
