Vue中v-bind的使用

概要：v-bind指令用于设置HTML的属性，即用于绑定数据和元素属性,比如class属性，style属性，value属性，href(:v-bind:href缩写为:href，<a :href="{{url}}">abc</a>)属性等等。只要是属性，就可以用v-bind指令进行绑定。

v-bind指令用于设置HTML的属性，即用于绑定数据和元素属性，例如：v-bind:href缩写为:href，<a :href="{{url}}">aa</a>。比方class属性，style属性，value属性，href属性等等。只要是属性，就可以用v-bind指令进行绑定。
注意：Mustache (双大括号写法)不能在 HTML 属性中使用，应使用 v-bind 指令。

1、:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"。
2、:v-bind用于绑定属性和数据 ，其缩写为“ : ”，v-bind:属性名=‘’ 简写为 :属性名=‘’，完整语法为<a v-bind:href="url"></a>缩写为<a :href="url"></a>，即v-bind:href  === :href。
3、:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

（1）绑定一个属性
        <img :src="imgUrl" /> 
        <img class="box" src="{{url}}" >
（2）绑定一个有属性的对象
        <div v-bind="{ id:someProp, 'other-attr': otherProp }"></div> 
（3） 内联字符串拼接
       <img :src="'../images/' + fileName" /> 
（4）class 绑定
       可以动态地切换class，并且可以与普通的class特性共存：
              <div class="content" :class="{ red: isRed }"></div> 
       可以把数组传给:class，以应用一个class列表：
              <div :class="[ classA, classB ]"></div> <div :class="[ classA, { classB : isB, classC: isC }]"></div> 
       并且可以直接绑定数据里的一个对象：
              <a v-bind:class="{ active : isActive }">click me</a>
       还可以使用三目运算符，根据条件切换列表中的class：
              <div :class="[ isAlready ? classA : "",  classB ]"></div>
       对于多个class，可以合并为：
              <div v-bind:class="[classA, { classB: isB, classC: isC }]">
（5）内联样式style绑定
       内联样式的对象语法，:style实际上是一个JavaScript对象，CSS属性名必须使用驼峰命名法；（使用短横分隔命名法容易报错）
              <div id="box" :style="{color:activeColor, font-size:size}"></div>
       也可以直接绑定到一个样式对象：
              <div id="content" :style="styleObject">fine</div>
              <div :style="{ fontSize: size + 'px' }"></div>
       可采用数组语法，将多个样式应用到同一个元素上：
               <div :style="[ styleA, styleB ]"></div> 
（6）通过prop绑定（prop必须在my-component中声明）
        <my-component :prop="time"></my-component> 
（7）通过 $props 将父组件的props 一起传递给子组件
        <child-component v-bind="$props"></child-component>
（8）xlink 
       <svg><a :xlink:special="fine"></a></svg>

作者：Coding_QAQ
链接：移动云开发者社区
来源：移动云开发者社区