html code
阿斯顿发
css code
.red { color: red; } .gray { background-color: gray; }
js code
window.onload = function() { new Vue({ el: '#box', data: { red: 'red', gray: 'gray' } }); }
How to write the style to take effect
:class="[red, gray]" The data attribute in the vue parameter is called
:class="{red : true, gray: true}"
The second method can also call the data attribute of the vue parameter. Remember, everything in Vue is data
new Vue({ el: '#box', data: { red: 'red', gray: 'gray', a: true, b: false } });
:class="json", a simplified version of the second method, the official version
new Vue({ el: '#box', data: { red: 'red', gray: 'gray', json: { a: true, b: false } } });
is basically the same as class
:style="{}"
:style="a"
new Vue({ el: '#box', data: { red: 'red', gray: 'gray', a: { color: 'red', backgroundColor: 'gray' //注意复合样式的书写规范 } } });
阿斯顿发
:style="[a, b]", a, b correspond to the two json data in data
More class and style in vue For relevant setting methods and related articles, please pay attention to the PHP Chinese website!