class&style样式设置
class
html代码
阿斯顿发
css代码
.red {
color: red;
}
.gray {
background-color: gray;
}js代码
window.onload = function() {
new Vue({
el: '#box',
data: {
red: 'red',
gray: 'gray'
}
});
}样式生效的写法
-
:class="[red, gray]" 调用的是vue参数里的data属性
立即学习“前端免费学习笔记（深入）”；
-
:class="{red: true, gray: true}"
第二种方法也是可以调用vue参数了的data属性的,记住，Vue里面一切皆是数据
new Vue({ el: '#box', data: { red: 'red', gray: 'gray', a: true, b: false } }); -
:class="json",第二种方法的精简版，官方版本
new Vue({ el: '#box', data: { red: 'red', gray: 'gray', json: { a: true, b: false } } });
style
和class基本相同
:style="{}"
-
:style="a"
new Vue({ el: '#box', data: { red: 'red', gray: 'gray', a: { color: 'red', backgroundColor: 'gray' //注意复合样式的书写规范 } } });阿斯顿发
:style="[a, b]", a, b对应的是data里的两个json数据
更多vue中class和style设置的相关方法 相关文章请关注PHP中文网！
