Vue2绑定样式网址：Class 与 Style 绑定 — Vue.js (vuejs.org)
在样式绑定当中，通常使用v-bind绑定class和style。表达式结果的类型除了字符串之外，还可以是对象或数组。
一、绑定class样式
1
2
3
4
| html:
<div class="basic" :class="test">
...
</div>
|
basic为原始样式，test为绑定样式。
（1）字符串写法，适用于：样式的类名不确定，需要动态指定；
1
2
3
4
5
6
7
8
9
10
| script:
new Vue({
el: '#app',
data() {
return {
test: 'normal'
}
},
...
})
|
（2）数组写法，适用于：要绑定的样式个数不确定，名字也不确定；
1
2
3
4
5
6
7
8
9
10
| script:
new Vue({
el: '#app',
data() {
return {
test: ['a','b','c']
}
},
...
})
|
（3）对象写法，适用于：要绑定的样式个数确定，名字也确定，需要动态决定用不用；
1
2
3
4
5
6
7
8
9
10
11
12
13
| script:
new Vue({
el: '#app',
data() {
return {
test: {
a:true,
b:false
}
}
},
...
})
|
二、绑定style样式
1
2
3
4
| html:
<div class="basic" :style="test">
{{msg}}
</div>
|
（1）对象写法（主）：
1
2
3
4
5
6
7
8
9
10
11
12
13
| script:
new Vue({
el: '#app',
data() {
return {
test: {
fontSize: '40px',
...
}
}
},
...
})
|
其中，test对象中关键字必须为已有的CSS属性名。
（2）数组写法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| script:
new Vue({
el: '#app',
data() {
return {
test: [
{
fontSize:'40px',
color:'blue'
},
{
background:'#ccc'
}
]
}
},
...
})
|
以上就是关于绑定样式的全部内容啦！感谢您的阅读，希望能与你一同进步！
共勉！！！ ✪ ω ✪