Vue 的 Class 與 Style 綁定

Class 與 Style 綁定

上一篇：Vue 的模板語法和計算屬性 ：https://segmentfault.com/a/11...
下一篇：Vue 的條件渲染和列表渲染 ：https://segmentfault.com/a/11...

綁定 HTML Class

對象語法

咱們能夠傳給 v-bind:class 一個對象，以動態地切換 class：

<style>
    .exp{
        border: 1px solid #ccc;
    }
    .forExp{
        background: blue;
    }
</style>
<div class="exp" v-bind:class="{newExp:isNewExp}"></div>
<script>
    var exp=new Vue({
        el:".exp".
        data:{
            isForExp:false
        }
    })
</script>

如上，咱們先給 .exp 一個邊框，咱們利用 v-bind 方法傳入一個新的 class 屬性 .newExp，設置一個藍色的背景顏色。當咱們在控制檯修改 .newExp 的屬性爲 true 時，會給 div 添加一個藍色的背景顏色。

咱們也能夠傳入更多的屬性來切換多個 class 。

<div class="exp" v-bind:class="{newExp:isExp,npc:isNpc}"></div>
<script>
    data:{
        isExp:false,
        isNpc:true
    }
</script>

在模板裏的渲染結果爲：

<div class="exp isNpc"></div>

咱們也能夠使用對象的方法來切換屬性

<div class="exp" v-bind:class="obj"></div>
<script>
    data:{
        obj:{
            newExp:false,
            npc:true
        }
    }
</script>

渲染結果和上面的同樣

數組語法

咱們能夠把一個數組傳給 v-bind:class，以應用一個 class 列表：

<div class="exp" v-bind:class="[newExp,oldExp]"></div>
<script>
    data:{
        newExp:"new",
        oldExp:"old"
    }
</script>

渲染爲：

<div class="exp new old"></div>

要切換class，使用三元運算符：

<div class="exp" v-bind:class="[act? newExp:oldExp]"></div>
<script>
    data{
        newExp:"new",
        oldExp:"old",
        act:true
    }
<script>

act 爲 true 時，添加 new ，爲 false 時添加 old。

用在組件上

聲明一個組件：

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

而後在使用它的時候添加一些 class：

<my class="tip"></my>

最終渲染爲

<p class="foo bar tip">Hi</p>

一樣的適用於綁定 HTML class:

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

當active爲true時，HTML 將被渲染成爲：

<p class="foo bar active">Hi</p>

綁定內聯樣式

對象語法

v-bind:style 的對象語法十分直觀——看着很是像 CSS，其實它是一個 JavaScript 對象。 CSS 屬性名能夠用駝峯式 (camelCase) 或 (配合引號的) 短橫分隔命名 (kebab-case)：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
    data:{
        activeColor:"blue",
        fontSize:20
    }
</script>

使用對象語法的話，會看起來更加清晰

<div v-bind:style="obj"></div>
<script>
    data:{
        obj:{
            color:"#FFF",
            fontSize:"20px"
        }
    }
</script>

數組語法

v-bind:style 的數組語法能夠將多個樣式對象應用到一個元素上：

<div v-bind:style="[style1,style2]"></div>
<script>
    data:{
        style1:{
            color:"#666"
        },
        style2:{
            background:"#b1b1b1"
        }
    }
</script>

自動添加前綴

當 v-bind:style 使用須要特定前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測並添加相應的前綴。

Chrome 和 Safari : -webkit-
IE :               -ms-
Firfox :           -moz-
Opera :            -o-

To be continue......

上一篇：Vue的模板語法和計算屬性 ：https://segmentfault.com/a/11...
下一篇：Vue 的條件渲染和列表渲染 ：https://segmentfault.com/a/11...