v-bind动态动态绑定style（对象语法）

1.用法

style属性要用小驼峰法
:style="{fontSize:'50px',backgroundColor:'red'}"

举例：
属性值是个字符串'50px'，不能动态改变

    <div id="app">
        <p :style="{fontSize:'50px'}">hello</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                finalSize : 50,
                currentColor: 'red'
            }
        })
    </script>

image.png

属性值换成data中的变量fontSize，可以动态改变

    <div id="app">
        <p :style="{fontSizefinalSize+'px'}">hello</p>
    </div>

image.png
image.png

2.简化代码

style的行间用函数替换

    <div id="app">
        <p :style="getStyle()">hello</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                finalSize : 50,
                currentColor: 'red'
            },
            methods : {
                getStyle : function() {
                    return {fontSize:this.finalSize+'px'};
                }
            }
        })
    </script>