文章目录
1. v-bind指令介绍2.v-bind的基本使用3.v-bind动态绑定class属性(对象语法)4.v-bind动态绑定class属性(数组语法)5.v-bind动态绑定内联style属性(对象语法)6.v-bind动态绑定内联style属性(数组语法)7.小练习v-for、v-bind
1. v-bind指令介绍
1.插值操作主要作用
：将Vue实例中的数据插入到我们模板的内容当中，并改变data可以动态改变显示。
2.动态绑定属性
：除了内容需要动态来决定外，元素的某些属性我们也希望动态来绑定。
比如，动态绑定a元素的href属性、动态绑定img元素的src属性。
Mustache双括号语法,只能在内容插值里使用，属性值是不可以用的
<img src="{{imgURL}}">、<img src="imgURL">是错误的，
vue不会解析将data值放里面去；会被当做字符，而不是变量；
3.动态绑定属性则使用v-bind指令：
作用：动态绑定属性
缩写：：
在前面加上v-bind后，就表明将该属性的属性值当成一个变量
vue会对它解析，将解析到的变量 赋予data属性中对应的值。
一般图片的img中src属性值都是不固定的，像轮播图等
src属性值：可以是服务器端请求过来的
服务器端请求过来的值放在vue实例的data中，然后将data中的属性赋给src属性值来使用
则响应式：修改data中的属性也可以实时响应，动态变化；
2.v-bind的基本使用
1.动态绑定属性：用指令v-bind 动态的绑定a元素的href属性、动态的绑定img元素的src属性；
2.将服务器请求过来的数据放在vue实例的data中
将data中对应数据给元素的属性使用，作为属性值，指令v-bind来完成。
这样绑定后，修改vue实例的data中对应的属性也可以实时的响应到对应的元素。和{{ }}效果相同
给img和a元素加v-bind指令后，就表明它的属性值是一个变量，就可以vue解析；
<div id
="app">
<img v
-bind
:src
="imgURL" alt
="" >
<a v
-bind
:href
="aHref">百度一下
</a
>
<h2
>{{message
}}</h2
>
<img
:src
="imgURL" alt
="" >
<a
:href
="aHref">百度一下
</a
>
</div
>
<script
>
const app
= new Vue({
el
:"#app",
data
:{
message
:"你好啊",
imgURL
:"https://img.alicdn.com/tfs/TB1UGbOOuL2gK0jSZPhXXahvXXa-440-470.png_294x430q100.jpg_.webp",
aHref
:"http://www.baidu.com"
}
})
</script
>
3.v-bind动态绑定class属性(对象语法)
1.v-bind动态绑定class
：用v-bind后，则class的值是一个变量，将变量可以放在data中动态绑定样式。
2.动态绑定class有两种方式：
对象语法 （先看这一种）
数组语法
3.动态绑定class属性的对象方法：
用指令v-bind， v-bind:class= "{key1：value1，key2：value2}"
若对象内容value值为true，则该key样式起作用
若对象内容value值为false，则该key样式不起作用
value值放在data中作为变量，进行使用，当使用时让它为true，不使用时为false，
这样就可以动态的修改属性class的值
4.绑定class的样式
将value值放在data中作为变量，进行使用，当使用时让它为true，不使用时为false，
这样就可以动态的修改属性class的值；
<style
>
.active
{
color
: red
;
}
</style
>
<div id
="app">
<h2
class="active">{{message
}}</h2
>
<h2 v
-bind
:class="active">{{message
}}</h2
>
<h2 v
-bind
:class="{active:isActive, line:isLine}">{{message
}}</h2
>
<button v
-on
:click
="btn">按钮
</button
>
<h2
class="title" v
-bind
:class="{active:isActive, line:isLine}">{{message
}}</h2
>
<h2 v
-bind
:class="getClass()">{{message
}}</h2
>
</div
>
<script
>
const app
= new Vue({
el
:"#app",
data
:{
message
:"你好啊",
active
:"active",
isActive
:true,
isLine
:true
},
methods
:{
btn
:function () {
this.isActive
=!this.isActive
},
getClass
:function () {
return {active
:this.isActive
, line
:this.isLine
}
}
}
})
</script
>
4.v-bind动态绑定class属性(数组语法)
数组语法
:用指令v-bind；后面接一个数组，[key1,key2...]，则class值为数组中内容，可为多个；
数组语法一般用的不多，因为它也写死了，既然写死了，可以直接用原始的方法
<body
>
<div id
="app">
<h2 v
-bind
:class="['active','line']">{{message
}}</h2
>
<h2
class="active line">{{message
}}</h2
>
<h2 v
-bind
:class="getClass()">{{message
}}</h2
>
</div
>
<script
>
const app
= new Vue({
el
:"#app",
data
:{
message
:"你好啊",
active
:"aaa",
line
:"bbb"
},
methods
:{
getClass
:function () {
return [this.active
,this.line
]
}
}
})
</script
>
5.v-bind动态绑定内联style属性(对象语法)
组件开发中，可能将一个导航栏封装起来，在不同地方使用这个导航栏的时候，
可能想让他在不同的地方显示的样式不同；
所以可以用v-bind动态绑定属性style，不同的地方可以动态显示不同的样式；
1.利用v-bind来给style动态绑定CSS内联样式。
绑定class有两种方式：
对象语法 （先看第一种）
数组语法
3.格式为：
<h2 v-bind:style="{“样式名”: “样式值”}">{{message}}</h2>
*样式值加双引号时，则是写固定
<h2 v-bind:style="{“样式名”: 样式值}">{{message}}</h2>
*样式值不加双引号时，则当做变量，vue将它解析成一个变量， 变量值会在data中找
<div id
="app">
<h2 v
-bind
:style
="{css属性名:属性值}">{{message
}}</h2
>
<h2 v
-bind
:style
="{'font-size': '50px'}">{{message
}}</h2
>、
<h2 v
-bind
:style
="{'font-size': Size ,color:Color}">{{message
}}</h2
>
<h2 v
-bind
:style
="{'font-size': final+'px'}">{{message
}}</h2
>
<h2 v
-bind
:style
="get()">{{message
}}</h2
>
</div
>
<script
>
const app
= new Vue({
el
:"#app",
data
:{
message
: "你好啊",
Size
: "100px",
final
:30,
Color
:"red"
},
methods
:{
get:function () {
return {'font-size': this.Size
, color
:this.Color
}
}
}
})
</script
>
6.v-bind动态绑定内联style属性(数组语法)
数组语法格式为：
<h2 v-bind:style="[base,base2]">{{message}}</h2>
<div id
="app">>
<h2 v
-bind
:style
="[base,base2]">{{message
}}</h2
>
</div
>
<script
>
const app
= new Vue({
el
:"#app",
data
:{
message
:"你好啊",
base
:{background
:"red"},
base2
:{"font-size":"100px"}
}
})
</script
>
7.小练习v-for、v-bind
要求：点击列表哪一项，该项的文字变成红色；
<style
>
.active
{
color
: red
;
}
</style
>
<div id
="app">
<ul
>
<li v
-for="(m,index) in movies"
v
-bind
:class="{active:index===dex}"
@click
="get(index)">
{{index
}}. {{m
}}
</li
>
</ul
>
</div
>
<script
>
const app
= new Vue({
el
:"#app",
data
:{
movies
:["海王","海尔兄弟","火影忍者","进击的巨人"],
active
:"active",
dex
:0
},
methods
:{
get(index
) {
this.dex
=index
}
}
})
</script
>
