[ Vue ] [ Vue3 Vite ] v-html를 이용한 HTML표현

v-text디렉티브나 수염표기법(Mustache syntax)으로 나타내는 값은 모두 일반 텍스트로 출력이 된다.

이는 HTML엘리먼트의 textContent를 업데이트하기 때문이다. 이는 결국 HTML을 작성한 문자열을 변수의 값으로 대입하더라도 HTML태그를 가지고 있는 문자열 그대로 렌더링이 된다.

반면 v-html디렉티브는 HTML엘리먼트의 innerHTML값에 변수값을 전달하기 때문에 문자열이 HTML마크업 언어로 표현되도록 한다. innerHTML에 바로 값을 집어 넣기 때문에 변수는 반드시 HTML평문이어야 하며, Vue의 문법을 사용해도 컴파일이 되지 않는다.

 

수염표기법 / v-text디렉티브

<div v-text="msg"></div> <!-- 안녕하세요 -->
<div v-pre>{{msg}}</div> <!-- 안녕하세요 -->

setup() {
    const msg = "안녕하세요"
    return {
        msg
    }
},

 

v-pre디렉티브를 이용한 컴파일 무시

<div v-pre>{{msg}}</div> <!-- {{msg}} -->