详解VUE中v-bind的基本用法详解VUE中v-bind的基本用法

1. v-bind:class（根据需求进行选择）
1.1

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 .box{
background-color: #ff0;
}
.textColor{
color: #000;
}
.textSize{
font-size: 30px;
}

"app"> "box" :class="{'textColor':isColor, 'textSize':isSize}">我是字

1.2

1.3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 .box{
background-color: #ff0;
}
.textColor{
color: #0f0;
}
.textSize{
font-size: 30px;
}

"app"> "box" :class="[classA,classB]">我是字

1.4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 .box{
background-color: #ff0;
}
.textColor{
color: #0f0;
}
.textSize{
font-size: 30px;
}

"app"> "box" :class="[isA?classA:'', classB]">我是字

2.v-bind:style (根据需求进行选择，驼峰式)
2.1

1
2
3
4
5
6
7
8
9
10
11
12
13 "app"> "box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字

2.2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 "app"> "box" :style="styleObject">我是字

2.3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
【详解VUE中v-bind的基本用法】17 "app"> "box" :style="[styleA,styleB]">我是字

2.4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 <div id="app">
<span class="box" :style="[isA?styleA:'', styleB]">我是字span> div> <script> new Vue({ el: "#app", data:{ styleA:{ fontSize: '30px', color: 'red' }, styleB:{ textShadow: '5px 2px 6px #000' }, isA: false } }) script>

3.v-bind:src

1
2
3
4
5
6
7
8
9
10
11 "app"> "url" />

4.v-bind:title

1
2
3
4
5
6
7
8
9
10
11 <div id="app">
<div :title="message">我是字div> div> <script type="text/javascript"> new Vue({ el: "#app", data:{ message:"我是吱吱" } }) script>