在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 v-bind:class 里面绑定变量的值是 class , 指向对应的 类选择器 样式表, 而 v-bind:style 里面绑定的变量的值是一个以 css 属性名 为 键名, 以 css 属性值 为键值 的 键值对, 这种键值对需要以 对象 的形式传进去, 也可以使用 数组 将多个 样式表对象 传进去. 以下简单展示了两种使用方法实现同样效果.
:class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
<style>
.style1 {
width: 100px; height: 100px; background-color: tomato;
}
.style2 {
margin: 0 auto;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{style1,style2}"></div>
</div>
<script>
var vApp = new Vue({
el: "#app",
data: {
style1: "style1",
style2: "style2"
}
})
</script>
</body>
</html>
:style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
<style>
.style1 {
width: 100px; height: 100px; background-color: tomato;
}
.style2 {
margin: 0 auto;
border-radius: 15px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:style="[style1,style2]"></div>
</div>
<script>
var vApp = new Vue({
el: "#app",
data: {
style1: {
"width": "100px",
"height": "100px",
"background-color": "tomato"
},
style2: {
"margin": "0 auto",
"border-radius": "15px"
}
}
})
</script>
</body>
</html>
效果