안녕하세요. 혀코입니다.
이번 시간에는 Vue에 데이터 값으로 Raw HTML을 사용하는 방법에 대해서 알아보겠습니다.
Vue에서 데이터 값을 표시하려면 {{}} 이중 중괄호를 사용합니다.
그런데 이 데이터가 Raw HTML이라면 이 Raw HTML도 String 값으로 읽어 다음과 같이 그대로 표시하게 됩니다.
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
data() {
return {
msg: '<div style="color:blue">Hello World</div>'
}
}
}
</script>
이 값을 실제 HTML 로 표시하려면 v-html directive를 사용해줘야 합니다.
<template>
<h1 v-html="msg"></h1>
</template>
<script>
export default {
data() {
return {
msg: '<div style="color:blue">Hello World</div>'
}
}
}
</script>
이렇게 Vue에 데이터 값으로 Raw HTML을 사용하는 방법에 대해서 알아보겠습니다.
해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글