[Vue 3] v-text 텍스트 바인딩

콧수염 문법을 통해 데이터를 DOM에 렌더링할 수 있습니다. 그런데 이 방법 대신 v-text 디렉티브를 사용하는 방법도 있습니다. 간단하게 알아보겠습니다.

v-text 미리보기

v-text

v-text는 text라는 의미처럼 해당 태그에 텍스트 내용을 바인딩해주는 역할을 합니다. 바인딩은 태그와 데이터를 연결한다는 의미입니다.

v-text 문법

v-text에 데이터값을 넣어주면 그 데이터값이 가지고 있는 내용으로 태그 내용을 채워줍니다.

      <태그 v-text="데이터값"></태그>
    

예를 들어 데이터값이 “Hello”였다면 다음과 같이 렌더링됩니다.

      <태그>Hello</태그>
    

콧수염 문법

v-text와 동일하게 텍스트를 바인딩하는 방법으로 이전에 보았던 콧수염 문법이 있습니다.

      <!-- 두 개는 동일 -->
<태그 v-text="데이터값"></태그>
<태그>{{ 데이터값 }}</태그>
    

v-text vs v-html

v-html은 Javascript에서 innerHTML처럼 동작합니다. 즉 데이터의 내용을 HTML로 해석해서 렌더링해주는 역할을 합니다. 만약 데이터값이 다음처럼 들어있다고 할 때

      data() {
	return {
		html: `<span style="color: blue">VueLog</span>`
	}
}
    

v-text와 v-html을 비교해보면

      <div v-text="html"></div>
<div v-html="html"></div>
    

마무리하며

v-text는 있는 그대로 문자열을 보여주는 반면, v-html은 내용을 해석해서 html로 렌더링해줍니다. 다음 글에서는 v-html을 자세히 다뤄보겠습니다.