VUE學習（五）-Class 與 Style 綁定

VUE學習（五）-Class 與 Style 綁定

    在應用界面中, 某個(些)元素的樣式是變化的，class/style 綁定就是專門用來實現動態樣式效果的技術

1 class  綁定

     （1）:class='xxx'

     （2）表達式xxx是字符串: 'classA'

     （3）表達式xxx是對象: {classA:isA, classB: isB}

     （4）表達式xxx是數組: ['classA', 'classB']

2  style  綁定

     （1）:style="{ color, fontSize}"

     （2）:style="{ color: activeColor, fontSize: fontSize + 'px' }"

     （3）其中 activeColor/fontSize 是 data 屬性

3 示例

   <style>
        .classA {
            color: red;
        }
        .classB {
            background: blue;
        }
        .classC {
            font-size: 20px;
        }
   </style> 
   <div id="app">
        <h3>1. class 綁定: :class='xxx'</h3>
        <p><span :class="a">表達式是字符串: 'classA'</span></p>
        <p :class="{classA: isA, classB: isB}">表達式是對象: {classA:isA, classB: isB}</p>
        <p :class="['classA', 'classC']"> 表達式是數組: ['classA', 'classB']</p>

        <h3>2. style 綁定</h3>
        <p :style="{ color, fontSize}">style="{ color, fontSize}"</p>
        <p :style="{ color: activeColor, fontSize: fontSizeVal +'px' }">style="{ color: activeColor, fontSize: fontSize +'px' }"</p>
        
        <button @click="update">更新</button>
    </div>

    <script type="text/javascript" src="../plugins/js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                a:'classA',
                isA:true,
                isB:false,
                color:'red',
                fontSize: '20px',
                activeColor:'red',
                fontSizeVal: '20'
            },
            methods:{
                update () {
                    this.a = 'classC'
                    this.isA = false
                    this.isB = true
                    this.color = 'blue'
                    this.activeColor = 'blue'
                    this.fontSize = '30px'
                    this.fontSizeVal = '30'
                }
            }
        })
    </script>

    注：style="{ color, fontSize}"採用該種形式時，屬性名稱必須是CSS屬性名稱