Vue에서 속성 바인딩이란 무엇입니까? | 뷰 Js 3

Vue에서 속성 바인딩이란 무엇입니까?

Vue에서 제한하는 정보를 논의하는 시점에서 우리는 그것이 활용되거나 레이아웃에 표시되는 지점이 Vue 예제 내부의 정보 개체인 정보의 원천에 직접적으로 연결되거나 연결되어 있음을 암시합니다. 결국 정보의 호스트는 정보의 목적과 연결됩니다.

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

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

v-bind 지시어는 구성요소의 dynamicId 속성과 동기화된 요소의 id 속성을 유지하도록 Vue에 지시합니다. 바인딩된 값이 null이거나 정의되지 않은 경우 속성이 렌더링된 요소에서 제거될 수 있습니다.

속기

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

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

: 로 시작하는 속성은 일반 HTML과 약간 다르게 보일 수 있지만 실제로는 속성 이름에 유효한 문자이며 모든 Vue 지원 브라우저에서 올바르게 구문 분석할 수 있습니다. 또한 이제 마지막으로 렌더링된 마크업에 더 이상 표시되지 않습니다. 속기 구문은 선택 사항이지만 나중에 사용법에 대해 자세히 알아보는 동안 유용할 수 있습니다.

For the rest of the guide, we can be the use of the shorthand syntax in code examples, as that is the most common usage for Vue developers.

부울 속성

부울 속성은 요소에 존재함으로써 true 또는 false 값을 나타낼 수 있는 속성입니다. 예를 들어 가장 일반적으로 사용되는 부울 속성 중 하나가 비활성화됩니다.

이 경우 V-bind는 약간 다르게 작동합니다.

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

disabled가 참이면 isButtonDisabled 속성이 포함됩니다.
보호할 <button disabled="">와의 일관성을 위해 값이 빈 문자열인 경우에도 삽입됩니다.
다른 거짓 값에 대해서는 속성이 무시됩니다.

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

여러 속성을 나타내는 JavaScript 객체가 있는 경우 다음과 같습니다.

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

인수 없이 v-bind를 사용하여 단일 요소에 바인딩할 수 있습니다.

<div v-bind="objectOfAttrs"></div>