코드를 실행하면 다음과 같이 출력합니다.
그림 3-12 v-bind 실행결과
웹 브라우저에서 개발자 도구(F12)를 열어보세요. Elements 탭에서 ‘Hello, Vue JS’의 HTML 태그를 확인합니다. 다음처럼 class 속성의 값으로 데이터에 정의한 red-color가 들어가 있습니다.
그림 3-13 class 속성 값 확인
코드를 실행하면 다음과 같이 출력합니다.
그림 3-12 v-bind 실행결과
웹 브라우저에서 개발자 도구(F12)를 열어보세요. Elements 탭에서 ‘Hello, Vue JS’의 HTML 태그를 확인합니다. 다음처럼 class 속성의 값으로 데이터에 정의한 red-color가 들어가 있습니다.
그림 3-13 class 속성 값 확인