html 코드 데이터 바인딩

1. 개인 공부 목적으로 작성한 글입니다.
2. 아래 출처를 참고하여 작성하였습니다.

---

1. v-html (html 데이터 바인딩)

1. 그냥 template 태그안에 {{}}를 사용하면 String으로 데이터가 바인딩이 됩니다.
2. v-html 태그를 사용하면 String 데이터 바인딩이 아닌 html 태그가 바인딩 됩니다.

---

2. Sample Code

<template>
    <div v-html="htmlString"></div>
</template>
<script>
export default {
    name: '',
    comments: {},
    data() {
        return {
            htmlString : '<p style="color:red;">This is a red string.</p>'
        };
    },
    setup() {},
    created() {},   
    mounted() {},   
    unmounted() {}, 
    methods: {}
}
</script>

---

출처

1. Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)