html程式碼
<p id="box"> <strong>阿斯顿发</strong> </p>
css程式碼
.red { color: red; } .gray { background-color: gray; }
js程式碼
window.onload = function() { new Vue({ el: '#box', data: { red: 'red', gray: 'gray' } }); }
樣式生效的寫法
<strong :class="[red, gray]"></strong>
<strong :class="{red: true, gray: true}"></strong>
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 } } });
<strong :class="json"></strong>
和class基本上相同:style="a"
<strong :style="{color: 'red', backgroundColor: 'gray'}"></strong>
new Vue({ el: '#box', data: { red: 'red', gray: 'gray', a: { color: 'red', backgroundColor: 'gray' //注意复合样式的书写规范 } } });