# 인터폴레이션(Interpolation)

# 콧수염(・ ෴ ・)

데이터 바인딩의 가장 기본적인 형태는 콧수염(mustache) 문법을 사용하는 텍스트 인터폴레이션입니다.

콧수염 문법은 컴포넌트의 데이터 객체의 title 속성 값을 템플릿에 바인딩 합니다. 데이터 속성은 모두 반응성(Reactivity)을 가지기에 속성이 변경되면 컴포넌트 뷰(UI)가 업데이트 됩니다.

<h2>{{ title }}</h2>

data() {
  return {
    title: '글로벌 내비게이션'
  }
}

# JavaScript 식

콧수염 문법 내부에 JavaScript 식(Expressions)을 사용할 수 있습니다.

{{ item.id + 1 }}

{{ `<${item.content}>` }}

{{ item.content.includes('렌더링') ? '뷰(View)' : '신텍스(Syntax)' }}

{{ item.content.replace(/s/g, ' / ') }}

{{ if (item.content === '영화') { result = '무비' } }}

// - avoid using JavaScript keyword as property name: "if"
// Raw expression: {{ if (item.content === '영화') { result = '무비' } }}

# 참고

보다 자세한 사용법은 템플릿 문법 문서를 참고하세요.