vue基础篇v-bind 及 class 与 style绑定（第四章）

一、了解v-bind指令
v-bind主要用法是动态更新HTML元素上的属性，当数据变化时，就会重新渲染。

<div id="#app">
    <a v-bind:href='url'></a>
    缩写：
    <a :href='url'></a>
</div>
var app=new Vue({
    el:'#app',
    data:{
        url:'www.baidu.com'
    }
})

二、绑定class 的几种方式
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。

1.直接绑定class样式

<div :class="className">绑定classA</div>

2.绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。

<div :class="{classA:isOk}">绑定class中的判断</div>

3.绑定class中的数组

<div :class="[classA,classB]">绑定class中的数组</div>
<div :class="[classA,{'red-font':hasError}]">绑定class中的数组</div>
//data中 hasError:true,则绑定red-font类

4.绑定class时使用三元表达式判断

<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>

5.绑定class时使用对象

<a class="link-href" v-bind:class="className">todo</a>
data(){
    return {
        className:{
            'red-font':true,
            'blue-font':false
        }
    }
}
//true：绑定，false：不绑定

三、绑定内联样式
绑定style

  <div :style="{color:red,fontSize:font}">绑定style</div>
  var app=new Vue({
   el:'#app2',
   data:{
           font:14 + 'px',
           red:'green'
        }
})

渲染结果：<div style="color:green; font-size:14px;">绑定style</div>

用对象绑定style样式

   <div :style="styles">用对象绑定style样式</div>
var app=new Vue({
   el:'#app',
   data:{
       styles:{
           fontSize:14 + 'px',
           color:'green'
            }
        }
})