class&style样式设置classhtml代码
<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'
}
});
}
样式生效的写法
:class=[red, gray] 调用的是vue参数里的data属性
<strong :class="[red, gray]"></strong>
:class={red: true, gray: 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>
:class=json,第二种方法的精简版，官方版本
new vue({
el: '#box',
data: {
red: 'red',
gray: 'gray',
json: {
a: true,
b: false
}
}
});
<strong :class="json"></strong>
style和class基本相同
:style={}
<strong :style="{color: 'red', backgroundcolor: 'gray'}"></strong>
:style=a
new vue({
el: '#box',
data: {
red: 'red',
gray: 'gray',
a: {
color: 'red',
backgroundcolor: 'gray' //注意复合样式的书写规范
}
}
});
<strong :style="a">阿斯顿发</strong>
:style=[a, b], a, b对应的是data里的两个json数据
更多vue中class和style设置的相关方法 。