一、 v-bind的基本使用

1. v-bind的基本使用

某些时候我们并不想将变量放在标签内容中，像这样 <h2>{{message}}</h2> 是将变量h2标签括起来，类似 js的innerHTML。

但是我们期望将变量 imgURL 写在如下位置，想这样 <img src="imgURL" alt=""> 导入图片是希望动态获取图片的链接，此时的 imgURL 并非变量而是 字符串 imgURL，如果要将其生效为变量，需要使用到一个标签 v-bind:，像这样<img v-bind:src="imgURL" alt="">，而且这里也不能使用Mustache语法，类似<img v-bind:src="{{imgURL}}" alt="">，这也是错误的。

<!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">



<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHerf"></a>

<img :src="imgURL" alt="">
<a :href="aHerf"></a>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/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变量图片会重新加载。

2. Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。v-bind 在处理 class 和 style 时，表达式结果的类型除了字符串之外，还可以是对象或数组。

v-bind:class 可以简写为 :class。

二、 v-bind动态绑定class

1. v-bind动态绑定class(对象语法)

有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上class="active"，当Dom元素有此class时候，变红<style>.active{color:red;}</style>，在写一个按钮绑定事件，点击变黑色，再次点击变红色。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

<style>

.active {

color:#f00;

}

</style>

</head>

<body>

<div id="app">

<h2 :class="{active:isactive}" @click="change">{{msg}}</h2>

<h2 :class="changeActive()" @click="change">{{msg}}</h2>

</div>

<script>

const vm = new Vue({

el:'#app',

data(){

return {

msg:'动态绑定对象',

isactive:false

}

},

methods:{

change(){

this.isactive = !this.isactive

},

changeActive(){

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' 的属性。

2. v-bind动态绑定class(数组用法)

class属性中可以放数组，会依次解析成对应的class。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

<h2 :class="['active','aaa']">我们正在学习vue</h2>

<h2 :class="[active,aaa]">我们正在学习vue</h2>

<h2 :class="getStyle()">我们正在学习vue</h2>

</div>

<script>

/* 数组中加引号和不加引号有区别

加引号:表示字符串是固定的,

不加引号:表示变量是不固定的 */

const vm = new Vue({

el:'#app',

data(){

return {

active:'isactive',

aaa:'bbb'

}

},

methods:{

getStyle(){

return [this.active,this.aaa]

}

}

})

</script>

</body>

</html>

加上单引号的表示字符串
不加的会当成变量
可以直接使用方法返回数组对象

三、 v-for和v-bind结合

使用v-for和v-bind实现一个小demo，将电影列表展示，并点击某一个电影列表时候，将此电影列表变成红色。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

<style>

.active {

color: #f00;

}

</style>

</head>

<body>

<div id="app">

<ul>



<li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''" @click="change(index)">{{item}}</li>

</ul>

</div>

<script>

const vm = new Vue({

el: '#app',

data() {

return {

currentIndex: 0,

movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"]

}

},

methods: {

change(i) {

/* this.currentIndex = i */

if (this.currentIndex == i) return

this.currentIndex = i

}

}

})

</script>

</body>

</html>

v-for时候的index索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给currentIndex，使用v-bind:绑定class，当index===currentIndexDom元素有active的class，颜色变红。

四、v-bind动态绑定style

1. v-bind动态绑定style(对象语法)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

<h2 :style="{fontSize:'50px'}">我们爱学习</h2>

<h2 :style="{fontSize:fontsize}">我们爱学习</h2>

<h2 :style="getStyle()">我们爱学习</h2>

</div>

<script>

const vm = new Vue({

el:'#app',

data(){

return {

fontsize:40+'px'

}

},

methods:{

getStyle(){

return {fontSize:this.fontsize}

}

}

})

</script>

</body>

</html>

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

2. v-bind动态绑定style(数组语法)

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

类似绑定class，绑定style也是一样的。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="app">

<h2 :style="[baseStyle]">我们爱学习</h2>

<h2 :style="['baseStyle']">我们爱学习</h2>

<h2 :style="getStyle()">我们爱学习</h2>

</div>

<script>

const vm = new Vue({

el:'#app',

data(){

return {

baseStyle:{background:'#f00'}

}

},

methods:{

getStyle(){

return [this.baseStyle]

}

}

})

</script>

</body>

</html>

有关v-bind 与class 和style 绑定相关的内容请参考：Class 与 Style 绑定 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/class-and-style.html