style行内样式绑定

style 属性行内样式绑定同样分为对象控制和数组控制。

对象控制绑定行内样式

视图层代码如下。

<div id="app" v-cloak>
    <div :style="{ color: 'red', fontSize: '20px' }">
        <h1>Hello World</h1>
    </div>
</div>

对象中的属性值同样是字符串。
如果出现 font-size 这类属性，需要使用驼峰式命名，为 fontSize。

对象中如果不使用字符串，可以使用下述代码。

视图层代码如下。

<div id="app" v-cloak>
    <div :style="{ color: red, fontSize: fSize }">
        <h1>Hello World</h1>
    </div>
</div>

M 层代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            red: 'red',
            fSize: '50px'
        },
        methods: {}
    });
</script>

数组控制绑定行内样式

行内样式绑定使用数组控制，需要先在 M 层定义样式，代码如下。

M 层代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            redColor: {
                color: 'red'
            },
            fSize: {
                fontSize: '80px'
            }
        },
        methods: {}
    });
</script>

视图层代码如下。

<div id="app" v-cloak>
    <div id="app">
        <div :style="[redColor, fSize]">
            <h1>Hello World</h1>
        </div>
    </div>
</div>