[Vue.js] v-html (htmlBinding)

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>