[Vue] Raw HTML 사용방법

 

안녕하세요. 혀코입니다.

 

이번 시간에는 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을 사용하는 방법에 대해서 알아보겠습니다.

 

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

 

감사합니다. :)