Vue.js에서 HTML 클래스 배열 바인딩 시 구문 오류 원인 분석

Vue.js 바인딩 HTML 클래스 배열 구문 오류, 자세한 내용은 다음과 같습니다.

조건부 클래스가 여러 개인 경우 이렇게 작성하는 것은 약간 번거롭습니다. 1.0.19+에서는 배열 구문에 객체 구문을 사용할 수 있습니다:

이렇게 작성하면 성공적으로 실행할 수는 있지만 오류가 발생합니다

data: {
classA: 'class-a',
classB: 'class-b',
classC: 'class-c',
isB: true,
isC: false
}
<div :class="[classA, { classB: isB, classC: isC }]">

렌더링 대상:

<div class="class-a classB">

대시인 경우 class-b가 실패하므로 여기서는 표준 객체 구문을 따옴표와 함께 사용해야 합니다.

<div :class="[classA, { &#39;class-b&#39;: isB, &#39;class-c&#39;: isC }]">

은 다음과 같이 렌더링됩니다.

<div class="class-a class-b">

위는 편집기에서 도입한 Vue.js 바인딩 HTML 클래스 배열의 구문 오류입니다. 수정됩니다. 모든 분들께 도움이 됩니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 제 시간에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

Vue.js 바인딩 HTML 클래스 배열의 구문 오류 원인을 분석하는 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!