v-bind 用于处理 HTML 中的标签属性。
class 对象语法
模版写法：
1
2
3
4
5
6
7
8
| <div v-bind:class="{ green: isActive01 }"></div>
多个：
<div v-bind:class="{ red: isActive02, font: isActive03 }">白色</div>
<!-- -------------------- 简写 -------------------- -->
<div :class="{ green: isActive01 }"></div>
多个：
<div :class="{ red: isActive02, font: isActive03 }">白色</div>
|
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind class</title>
<style type="text/css">
.blue {
width: 100px;
height: 100px;
background-color: blue;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}
.red {
width: 100px;
height: 100px;
background-color: red;
}
.font {
color: white;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div v-bind:class="styl"></div>
<div v-bind:class="{ green: isActive01 }"></div>
<div v-bind:class="{ red: isActive02, font: isActive03 }">白色</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
styl: 'blue',
isActive01: true,
isActive02: true,
isActive03: true
}
}
})
</script>
</body>
</html>
|
class 数组语法
模版写法：
1
2
3
| <div v-bind:class="[ class01, class02 ]">白色</div>
<!-- -------------------- 简写 -------------------- -->
<div :class="[ class01, class02 ]">白色</div>
|
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind class</title>
<style type="text/css">
.red {
width: 100px;
height: 100px;
background-color: red;
}
.font {
color: white;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div v-bind:class="[ class01, class02 ]">白色</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
class01: 'red',
class02: 'font'
}
}
})
</script>
</body>
</html>
|
style 对象语法
模版写法：
1
2
3
| <div v-bind:style="{ color: 'red', fontSize: '50px' }">文字</div>
<!-- -------------------- 简写 -------------------- -->
<div :style="{ color: 'red', fontSize: '50px' }">文字</div>
|
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind style</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div v-bind:style="{ color: 'red', fontSize: '50px' }">文字</div>
<div v-bind:style="styleObject">白色</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
styleObject: {
width: '100px',
height: '100px',
backgroundColor: 'red',
color: 'white'
}
}
}
})
</script>
</body>
</html>
|
注：当样式类似于font-size这种形式时，需要改写为fontSize。
style 数组语法
模版写法：
1
2
3
| <div v-bind:style="[style01, style02]">文字</div>
<!-- -------------------- 简写 -------------------- -->
<div :style="[style01, style02]">文字</div>
|
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind style</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<div v-bind:style="[style01, style02]">文字</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
style01: {
width: '100px',
height: '100px',
backgroundColor: 'red'
},
style02: {
color: 'white'
}
}
}
})
</script>
</body>
</html>
|
需要注意的地方
v-bind 不仅用于 class 和 style 中，还用于其它，如：src，href等等。
当v-bind:style使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。