Vue：入門4（Class 與 Style 綁定 ）

綁定 HTML Class

1.對象語法

<!--如果isActive true則返回active會顯示 class=active，false則不會有這個class-->
<div id="id1" v-bind:class="{ active: isActive }">1.對象語法</div>
<script>
    var vm1 = new Vue({
        el: '#id1',
        data: {
            isActive:true,
        }
    });
</script>

可以寫多個class

<!--下面頁面顯示爲<div id="id2" class="static active"> -->
<div id="id2" class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
   xxxx
</div>
<script>
    var vm2 = new Vue({
        el: '#id2',
        data: {
            isActive:true,
            hasError:false
        }
    });
</script>

另外一種綁定class的方式

<!--
頁面顯示爲<div id="id3" class="active text-danger">classObject</div>
-->
<div id='id3' v-bind:class="classObject">classObject</div>
<script>
    var vm3 = new Vue({
        el: '#id3',
        data: {
            classObject:{
                active:true,
                'text-danger':true
            }
        }
    });
</script>

通過計算屬性方式

<!--
頁面結果：<div id="id4" class="active">classObject</div>
-->
<div id='id4' v-bind:class="classObject">classObject</div>
<script>
    var vm4 = new Vue({
        el: '#id4',
        data: {
            isActive: true,
            error: null
        },
        computed:{
            classObject: function () {
                console.log(this.error);
                return {
                    active: this.isActive,
                    'text-danger': this.error
                }
            }
        }
    });
</script>

2。數組語法

<!-- 結果：<div id="id5" class="active text-danger">數組語法</div> -->
<div  id="id5" v-bind:class="[activeClass, errorClass]">數組語法</div>
<script>
    var vm5 = new Vue({
        el: '#id5',
        data: {
            activeClass: 'active',
            errorClass: 'text-danger',
        }
    });
</script>

在數組中使用三元表達式

<!--
當isActive爲true，則顯示activeClass的值，結果：
<div id="id6" class="active text-danger">三元表達式</div>
-->
<div id="id6" v-bind:class="[isActive ? activeClass : '' , errorClass]">三元表達式</div>
<script>
    var vm6 = new Vue({
        el: '#id6',
        data: {
            isActive: true,
            activeClass: 'active',
            errorClass: 'text-danger',
        }
    });
</script>

數組中用對象

<!--
結果：<div id="id7" class="active text-danger">數組中行對象</div>-->
<div id="id7" v-bind:class="[{ active: isActive }, errorClass]">數組中行對象</div>
<script>
    var vm7 = new Vue({
        el: '#id7',
        data: {
            isActive:true,
            errorClass: 'text-danger',
        }
    });
</script>

在組件中使用class

<div id="id8">
<!--
這裏的組件會在後面學習到，但是不難理解,同時注意它是添加不會覆蓋原先的
結果：<p class="foo bar baz boo active">Hi</p> -->
<my-component class="baz boo" v-bind:class="{active:isActive}"></my-component>
</div>
<script>
    Vue.component('my-component', {
        template: '<p class="foo bar">Hi</p>'
    })
    var vm8 = new Vue({
        el: '#id8',
        data:{
            isActive : true,
            errorFlag: true,
        }
    });
</script>

綁定內聯樣式

1。對象語法

<!-- 結果：<div id="id9" style="color: red; font-size: 30px;">對象語法</div> -->
<div id="id9" v-bind:style="{ color:activeColor, fontSize: fontSize + 'px'}">對象語法</div>
<script>
    var vm9 = new Vue({
        el: '#id9',
        data: {
            activeColor: 'red',
            fontSize: 30,
        }

    });
</script>

樣式對象方式

<!--結果<div id="id10" style="color: green; font-size: 30px;">styleObj</div>-->
<div id="id10" v-bind:style="styleObj">styleObj</div>
<script>
    var vm10 = new Vue({
        el: '#id10',
        data: {
            styleObj:{
                fontSize: 30,
            }
        }
    });
</script>

2。數組語法

<!--
注意後面的如果有前面的屬性會覆蓋前面的屬性
結果：<div id="id11" style="color: green; font-size: 30px;">
-->
<div  id = 'id11' v-bind:style="[baseStyles, overridingStyles]">2。數組語法</div>
<script>
    var vm11 = new Vue({
        el: '#id11',
        data:{
            baseStyles: {
                color: 'green',
                fontSize: '10px',
            },
            overridingStyles: {
                fontSize: '30px',
            },
        }
    });
</script>

3。多重值 (2.3.0+支持)

<!--
爲 style 綁定中的屬性提供一個包含多個值的數組，只會渲染數組中最後一個被瀏覽器支持的值。
所以有可能你顯示的和我的不一樣
結果：<div id="id12" style="display: flex;">多重值</div>-->
<div id="id12" :style="{ display: ['-webkit-box', 'flex', '-ms-flexbox'] }">多重值</div>
<script>
    var vm12 = new Vue({
        el:'#id12',
    });
</script>
</body>
</html>

歡迎關注，會同步更新，隨時隨地一起學習
微信公衆號：教練我想學PHP
天天快報、騰訊新聞和QQ瀏覽器：教練我想學PHP