Vue.js学习笔记：v-bind属性绑定（class,src）

    v-bing指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如比较常用的是v-bind:class。

是主要用于属性绑定的，因为比较常用，所以有缩写的用法。

<!--完整的语法-->

<a v-bind:href="url"></a>

<!--缩写的语法-->

<a :href="url"></a>

    一.绑定HTML Class

          首先，我们可以来看看，给一个元素绑定一个v-bind:class对象，用来动态切换class.相当于是jQuery中的toggle()方法，或者是addClass(),removeClass()方法。

p{background-color:yellow;}.red{background-color:red;}.green{background-color:green;}
{{text}}

很明显，运行的结果是p元素的背景颜色是green。

当isRed和isGreen变化的时候，class列表也相应地进行更新。如果将isRed改为true,isGreen改为false的话，那么p元素的背景颜色就会变为红色。

而且当:class=的值是使用"{  }"来括起的形式，就说明这个是一个对象，里面是有boolean值的运算的。

如果值是一个数组的话，那会是什么情况呢？

p{background-color:yellow;}.red{background-color:red;}.green{background-color:green;}
{{text}}

运行的结果是一段背景颜色为红色为文本。

而:class=的值是一个以数组的形式括起来的，里面保存的是字符串的形式

    二.绑定HTML src

我们可以使用:src来动态绑定数据，例如 <img :src="url" alt="图片"/>

script代码：

new Vue({
    el:'#app',
    data:{
       url:'1.png'
    }
    })