【老司機帶你飛】vue.js基礎入門教程（九）

樣式綁定

操作元素的class列表和style內嵌樣式的常見的需求。因爲class和style都是html的屬性，所以我們可以使用v-bind來動態改變樣式。
1） 綁定html的class
可以爲v-bind:class設置一個對象，動態切換class

<style>
    .active{
        color: red;
    }
</style>
<div id="app">
    <div v-bind:class="{active:isActive}">易動學院</div>
    <button v-on:click="changeStyle">切換樣式</button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isActive:true
        },
        methods:{
            changeStyle:function () {
                this.isActive=!this.isActive;
            }
        }
    })
</script>

對象中可以傳入多個值，來控制不同的樣式

<style>
    .active{
        color: red;
    }
    .size{
        font-size: 30px;
    }
</style>
<div id="app">
    <div v-bind:class="{active:isActive,'size':isSize}">易動學院</div>
    <button v-on:click="changeStyle">切換樣式</button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isActive:true,
            isSize:false
        },
        methods:{
            changeStyle:function () {
                this.isActive=!this.isActive;
                this.isSize=!this.isSize;
            }
        }
    })
</script>

可以和普通的class共存

<div class=”static” v-bind:class="{active:isActive,'size':isSize}">易動學院</div>

綁定的對象不一定定義在模板裏，可以定義在data裏

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

v-bind:class可以設置一個數組

<style>
    .active{
        color: red;
    }
    .size{
        font-size: 30px;
    }
</style>
<div v-bind:class="['active','size']">易動學院</div>

如果想要根據條件進行class列表的切換，可以使用三元運算符

<div v-bind:class="[isActive?'active':'','size']">易動學院</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isActive:false
        }
    })
</script>

2） 綁定內聯樣式
對象語法

<div v-bind:style="{color:textColor,fontSize:fontSize+'px'}">易動學院</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            textColor:"red",
            fontSize:30
        }
    })
</script>

可以放置一個樣式對象

<div v-bind:style="styleObject">易動學院</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            styleObject:{
                color:"red",
                fontSize:"30px"
            }
        }
    })
</script>

數組語法
使用數組語法，綁定多個樣式對象

<div v-bind:style="[textStyle,backgroundStyle]">易動學院</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            textStyle:{
                color:"red",
                fontSize:"30px",
                fontWeight:"bold"
            },
            backgroundStyle:{
                background:"yellow"
            }
        }
    })
</script>

QQ：732005030
掃碼加微信