《vue-内置指令-1-v-bind》

1、bind指令

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

2、绑定class有两种方式:

2.1、对象语法是:class后面跟的是一个对象:v-bind:class="对象名"；

    <div :class="{fontColor:active}">;
        {{text}}
    </div>

可以动态地切换 class，* 值对应true ,false

data:{
    text:'123456',
    active:true,
}

<style>
    .fontColor{
        color:red;
    }
</style>

2.2、数组语法是:class后面跟的是一个数组:v-bind:class="[arr1,arr2]"

    <div :class="[arr1,arr2]">;
        {{text}}
    </div>

data:{
    text:'123456',
    arr1:'fontColor',
    arr2:'fontBorder'
}

<style>
    .fontColor{
        color:red;
    }
    .fontBorder{
        border:1px solid blue;
    }
</style>

3、v-bind绑定style属性

    <div :style="{'color':color,'fontSize':fontSize+'px'}">;
        {{text}}
    </div>

data:{
    text:'123456',
    color:red,
    fontSize:16
    
}