FrontEnd/Vue 3
[Vue.js] v-html (htmlBinding)
Chaedie
2022. 9. 14. 15:04
728x90
VueJS에서 미리 선언한 HTML 코드를 꽂아 넣고 싶으면
- 아래와 같이 v-html이라는 곳에 미리 선언한 htmlString data를 넣으면된다.
- 그러면 아래 그림과 같이 v-html 속성을 추가한 DOM요소의 하위 태그로 htmlBinding이 Append된다.
<template>
<div v-html="htmlString"></div>
</template>
<script>
export default {
name: 'DataBindingHtml',
components: {},
data() {
return {
title: 'sampleTitle',
htmlString: '<p style="color:red;">This is a red String.</p>',
};
},
};
</script>
