# 1. v-bind的基本使用 ​ 某些时候我们并不想将变量放在标签内容中,像这样`

{{message}}

`是将变量h2标签括起来,类似js的innerHTML。但是我们期望将变量`imgURL`写在如下位置,想这样``导入图片是希望动态获取图片的链接,此时的imgURL并非变量而是字符串imgURL,如果要将其生效为变量,需要使用到一个标签`v-bind:`,像这样``,而且这里也不能使用Mustache语法,类似``,这也是错误的。
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind的基本使用</title>
</head>
<body>
<div id="app">
<!-- 错误的做法这里不能使用Mustache语法 -->
<!-- <img v-bind:src="/note_image/Vue/vue2/&#123;&#123;imgURL&#125;&#125;" alt=""> -->
<!-- 正确的做法使用v-bind指令 -->
<img v-bind:src="/note_image/Vue/vue2/imgURL" alt="">
<a v-bind:href="aHerf"></a>
<!-- 语法糖写法 -->
<img :src="/note_image/Vue/vue2/imgURL" alt="">
<a :href="aHerf"></a>

</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
imgURL:"https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1",
aHerf:"http://www.baidu.com"
}
})
</script>
</body>
</html>
​ 此时vue对象中定义的`imgURL`变量和`aHerf`变量可以动态的绑定到img标签的src属性和a标签的href属性。`v-bind:`由于用的很多,vue对他有一个语法糖的优化写法也就是`:`,此时修改imgURL变量图片会重新加载。 ![](https://cdn.jsdelivr.net/gh/krislinzhao/IMGcloud/img/20200508144717.gif) # 2. v-bind动态绑定class ## 2.1. v-bind动态绑定class(对象语法) ​ 有时候我们期望对Dom元素的节点的class进行动态绑定,选择此Dom是否有指定class属性。例如,给h2标签加上`class="active"`,当Dom元素有此class时候,变红``,在写一个按钮绑定事件,点击变黑色,再次点击变红色。
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind动态绑定class(对象语法)</title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id="app">
<!-- <h2 class="active">&#123;&#123;message&#125;&#125;</h2>
<h2 :class="active">&#123;&#123;message&#125;&#125;</h2> -->

<!-- 动态绑定class对象用法 -->
<!-- <h2 :class="{key1:value1,key2:value2}">&#123;&#123;message&#125;&#125;</h2>
<h2 :class="{类名1:true,类名2:boolean}">&#123;&#123;message&#125;&#125;</h2> -->
<h2 class="title" :class="{active:isActive}">&#123;&#123;message&#125;&#125;</h2>
<h2 class="title" :class="getClasses()">&#123;&#123;message&#125;&#125;</h2>
<button @click="change">点击变色</button>

</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
active:"active",
isActive:true
},
methods: {
change(){
this.isActive = !this.isActive
},
getClasses(){
return {active:this.isActive}
}
},
})
</script>
</body>
</html>
​ 定义两个变量`active`和`isActive`,在Dom元素中使用`:class={active:isActive}`,此时绑定的`class='active'`,isActive为true,active显示,定义方法change()绑定在按钮上,点击按钮`this.isActive = !this.isActive`,控制Dom元素是否有`class='active'`的属性。 ![](https://cdn.jsdelivr.net/gh/krislinzhao/IMGcloud/img/20200508145221.gif) ## 2.2. v-bind动态绑定class(数组用法) ​ class属性中可以放数组,会依次解析成对应的class。
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind动态绑定class(数组用法)</title>
<style>
</style>
</head>
<body>
<div id="app">
<!-- 加上单引号当成字符串 -->
<h2 class="title" :class="['active','line']">&#123;&#123;message&#125;&#125;</h2>
<!-- 不加会被当成变量 -->
<h2 class="title" :class="[active,line]">&#123;&#123;message&#125;&#125;</h2>
<h2 class="title" :class="getClasses()">&#123;&#123;message&#125;&#125;</h2>

</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
active:"aaaa",
line:'bbbb'
},
methods: {

getClasses(){
return [this.active,this.line]
}
},
})
</script>
</body>
</html>
1. ​ 加上单引号的表示字符串 2. ​ 不加的会当成变量 3. ​ 可以直接使用方法返回数组对象 ![](https://cdn.jsdelivr.net/gh/krislinzhao/IMGcloud/img/20200508145051.png) # 3. v-for和v-bind结合 ​ 使用v-for和v-bind实现一个小demo,将电影列表展示,并点击某一个电影列表时候,将此电影列表变成红色。
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>作业(v-for和v-bind的结合)</title>
<style>
.active{
color:red;
}
</style>
</head>
<body>
<div id="app">

<ul>
<li v-for="(item, index) in movies" :key="index" :class="{active:index===currentIndex}" @click="changeColor(index)" >&#123;&#123;index+"---"+item&#125;&#125;</li>
</ul>

</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
currentIndex:0,
movies:["海王","海贼王","火影忍者","复仇者联盟"]
},
methods: {
changeColor(index){
this.currentIndex = index
}
},
})
</script>
</body>
</html>
​ v-for时候的index索引,给每行绑定事件点击事件,点击当行是获取此行索引index并赋值给`currentIndex`,使用`v-bind:`绑定class,当`index===currentIndex`Dom元素有active的class,颜色变红。 ![](https://cdn.jsdelivr.net/gh/krislinzhao/IMGcloud/img/20200508145120.gif) # 4. v-bind动态绑定style ## 4.1 v-bind动态绑定style(对象语法)
1
2
3
4
5
6
<!-- <h2 :style="{key(属性名):value(属性值)}">&#123;&#123;message&#125;&#125;</h2> -->
<!-- 加单引号,当成字符串解析 -->
<h2 :style="{fontSize:'50px'}">&#123;&#123;message&#125;&#125;</h2>
<!-- 不加单引号,变量解析 -->
<h2 :style="{fontSize:fontSize}">&#123;&#123;message&#125;&#125;</h2>
<h2 :style="getStyle()">&#123;&#123;message&#125;&#125;</h2>
## 4.2 v-bind动态绑定style(数组语法)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
<h2 :style="[baseStyle]">&#123;&#123;message&#125;&#125;</h2>
<h2 :style="getStyle()">&#123;&#123;message&#125;&#125;</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊",
baseStyle:{backgroundColor:'red'}
},
methods: {
getStyle(){
return [this.baseStyle]
}
},
})
</script>
​ 类似绑定class,绑定style也是一样的。