html code
<p id="box"> <strong>阿斯顿发</strong> </p>
css code
.red { color: red; } .gray { background-color: gray; }
js code
window.onload = function() { new Vue({ el: '#box', data: { red: 'red', gray: 'gray' } }); }
작성방법 스타일을 적용하려면
:class="[red, grey]"가 vue 매개변수의 데이터 속성을 호출합니다
<strong :class="[red, gray]"></strong>
:class= "{red : true, grey: true}"
<strong :class="{red: true, gray: true}"></strong>
두 번째 방법은 vue 매개변수의 data 속성을 호출할 수도 있습니다. Vue의 모든 것은 데이터
new Vue({ el: '#box', data: { red: 'red', gray: 'gray', a: true, b: false } });
<strong :class="{red: a, gray: b}"></strong>
new Vue({ el: '#box', data: { red: 'red', gray: 'gray', json: { a: true, b: false } } });
은 기본적으로 class와 동일합니다.
<strong :class="json"></strong>