vue_v-bind指令绑定内联样式

使用v-bind:style 可以给元素绑定内联样式，方法与:class类似，也有对象语法和数组语法，看起来很像直接在元素上写CSS。

css 属性名称使用驼峰命名（ came!Case ）或短横分隔命名（ kebab-case ）。

语法格式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

错误语法格式：

<div : style="{ 'color': color,'fontSize': fontSize + 'px' }">文本样式效果</div>

上面的这个是错误语法格式，记住： ":"和style必须紧挨着，中间不能有空格。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>

  <!--给元素绑定内联样式-->
   <div id="app">
        <div :style="{ 'color': color,'fontSize': fontSize + 'px' }">文本样式效果</div>
   </div>

<script>
    //创建vue实例
    var  app=new Vue({
        el: '#app',
        data:{
            color: 'green',
            fontSize: 20
        },

    });

</script>
</body>
</html>

运行结果：

v-bind绑定style运行结果