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

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

어제 공식 웹사이트 튜토리얼에서 이와 같은 오류를 발견했습니다. 아래 그림을 참조하세요

http ://cn.vuejs.org/guide/class-and-style.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">

대시인 경우 클래스 B가 실패하므로 표준은 여전히 ​​입니다. 여기에 사용됨 따옴표가 있는 객체 구문

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

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

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