mustache 와 v-html 차이 on Vue.js

json 문자열을 받아서 화면에 표시하는데, json 데이터에 &, <, > 같은 특수문자가 포함되는 경우가 있다.

그래서 rest API 에서 html escace 처리를 해서 &amp; 처럼 변환해서 response 로 json 을 전달한다.

 

{
    "appData": {
        "marketName": "googleplay",
        "appName": "abc&def tools",
    }
}

 

위와 같은 원본 json 데이터는 appName 부분이 "appName": "abc&amp;def tools" 로 변환해야 하는 경우가 있다고 가정하자.

 

Vue 로 appData.appName 값을 표시를 해야하는데, mustach({{}}) 표현식으로 하면 escape 된 값이 그대로 보이게 된다.

<div class="col-md-3 field-value">
    {{ appData[`appName`] }}
</div>

-------------------------------------

abc&amp;def tools

 

v-html 지시어를 사용하면 escape 된 값을 자동 변환해준다.

<div class="col-md-3 field-value" v-html="appData[`appName`]">
</div>

-------------------------------------

abc&def tools

 

참고

https://github.com/vuejs/vue/issues/8615

Don't escape HTML char codes in mustache expressions · Issue #8615 · vuejs/vue