一.用来属性绑定

v-bind  主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

 二.用来绑定class

 （1）   我们可以传给 v-bind:class 一个对象，以动态地切换 class

<div v-bind:class="{ active: isActive }"></div>

 （2）我们可以把一个数组传给 v-bind:class，以应用一个 class 列表 

<div v-bind:class="[activeClass, errorClass]"></div>

（3）甚至我们可以在数组中用三元运算符，你也想根据条件切换列表中的 class，可以用三元表达式

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

（4）当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法 

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

三.用在组件上 

  值得一提的是 当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

如果你声明了这个组件： 

Vue.component('my-component', {
 template: '<p class="foo bar">Hi</p>'
})

    然后在使用它的时候添加一些 class

<my-component class="baz boo"></my-component>

     HTML 将被渲染为:

<p class="foo bar baz boo">Hi</p>

 对于带数据绑定 class 也同样适用   

<my-component v-bind:class="{ active: isActive }"></my-component>

四.绑定内联样式

数据绑定（v-bind指令）另一个常见需求是操作元素的内联样式。因为它是属性，我们可以用 v-bind 处理它们
我们只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind 用于 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

<template>
  <div id="app">
    <p v-bind:style="{color:colorStyle,fontSize:fontSizeStyle+'px'}">
        你好
    </p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      colorStyle: 'red',
      fontSizeStyle: 20
    }
  }
}
</script>
<style></style>