Vue.js v-html

1 개요

Vue.js v-html

• HTML이 포함된 데이터를 이스케이프시키지 않고 HTML 그대로 출력할 수 있는 방법
• XSS 방지를 위해 사용자가 등록한 데이터(예: 댓글)에는 적용하지 말라고 함

<div id="app">
  <p v-html="message"></p>
</div>

<script src="//unpkg.com/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>Hello, Vue!</h1>'
  }
})
</script>

2 같이 보기

• Vue.js v-model
• Vue.js v-pre

3 참고

• https://vuejs.org/v2/guide/syntax.html#Raw-HTML
• https://codingexplained.com/coding/front-end/vue-js/outputting-escaping-html-v-html-directive