前面文章介绍的指令主要作用是将值插入到我们模板的内容当中。
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定,比如动态绑定a元素的href属性,比如动态绑定img元素的src属性 动态绑定一些类、样式等等
这个时候，我们可以使用v-bind指令
v-bind 绑定属性
作用：动态绑定属性
缩写 ：
v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(以后的文章会介绍)
比如通过Vue实例中的data绑定元素的src和href，代码如下
<div id="app">
<a v-bind:href="link">Vuejs官网</a>
<img v-bind:src="logoURL" alt="">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
link: 'https://vuejs.org/imags/logo.png',
ogoURL:'http://vuejs.org'
}
})
</script>
v-bind语法糖(简写 : )
<div id="app">
<a :href="link">Vuejs官网</a>
<img :src="logoURL" alt="">
</div>
v-bind 绑定样式
很多时候，我们希望动态的来切换class，比如：
当数据为某个状态时，字体显示红色。
当数据另一个状态时，字体显示黑色。
绑定class有两种方式：
对象语法
数组语法
（1）绑定方式：对象语法
对象语法的含义是:class后面跟的是一个对象。
用法一：直接通过{}绑定一个类
:class="{'类名': 布尔值}"
<h2 :class="{'active': isActive}">Hello World</h2>
用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
<style>
.active {
color:red;
}
</style>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: 'true',
isLine: 'true'
}
})
</script>
(2)绑定方式：数组语法
数组语法的含义是:class后面跟的是一个数组 用的比较少
用法一：直接通过[]绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
<style>
.active {
color:red;
}
.line {
color:blue;
}
案例：vue v-for出来的列表，点击当前，当前被点击的字体变颜色
<!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>Document</title>
<style>
.active {
color: red;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies">
<a @click="btnClick(index)" :key="index" :class="{active:currenindex ===index}">{{item}}--{{index}}</a></li>
</ul>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
movies: ['鸣人', '佐助', '雏田', '天天', '小樱'],
currenindex: 0,
},
methods: {
btnClick: function (index) {
this.currenindex = index;
},
}
});
</script>
</body>
</html>
