前言

首先我们要想一想，为什么要动态绑定样式？

因为vue后面会涉及到很多组件，那么组件是可以复用的，这时根据业务的不同，组件展示的效果样式就不同，那么我们就可以动态的绑定样式。

语法

v-bind:style=“key(属性名):value(属性值)”

代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<h2 :style="getStyle()">你好 全世界  才不要打工呢</h2>
</div>
<script src="../js/vue.js"></script>
<script>

    const app=new Vue({
        el:"#app",
        data:{
            fontSize:'50px',
            color:"red"
        },
        methods:{
            getStyle:function(){
                return {fontSize:this.fontSize,color:this.color};
            }
        }
    });

</script>
</body>
</html>
效果图

VueJs之绑定样式，v-bind:style笔记_html

-END-

如果你喜欢我的分享，欢迎关注微信公众号 java学长分享技术干货！

悄悄告诉你免费赠送重磅互联网架构师教程，提升职场技术水平！

VueJs之绑定样式，v-bind:style笔记_html_02