Vue Js 바인딩 텍스트 및 HTML

Vue는 렌더링된 DOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용합니다.

텍스트 보간

데이터 바인딩의 가장 기본적인 형태는 "mustache"구문(이중 괄호)을 사용하는 텍스트 보간입니다.

<span>Message: {{ msg }}</span>

원시 HTML

Double mustache는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다. 기본 HTML을 표시하려면 v-html 지시문을 사용해야 합니다.

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

속성 바인딩

콧수염은 HTML 속성에서 사용할 수 없습니다. 대신 v-bind 지시문을 사용하십시오.

<div v-bind:id="dynamicId"></div>

속기

v-bind는 매우 일반적으로 사용되기 때문에 다음과 같은 전용 단축 구문이 있습니다.

<div :id="dynamicId"></div>

부울 속성

부울 속성은 요소에 존재하여 참/거짓 값을 나타낼 수 있는 속성입니다.

예를 들어 disabled는 가장 일반적으로 사용되는 부울 속성 중 하나입니다.

<button :disabled="isButtonDisabled">Button</button>

여러 속성을 동적으로 바인딩

여러 속성을 나타내는 JavaScript 객체가 있는 경우

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

JavaScript 표현식 사용

지금까지 템플릿에 간단한 속성 키만 연결했습니다. 그러나 Vue는 실제로 모든 데이터 바인딩에서 JavaScript 표현식의 모든 기능을 지원합니다.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

지침

지시문은 v-로 시작하는 특수 속성입니다. Vue는 위에서 소개한 v-html 및 v-bind를 포함하여 여러 가지 기본 제공 지시문과 함께 제공됩니다.

<p v-if="seen">Now you see me</p>

## Become a sponsor to PLBhoi