2017.04 vue学习笔记---04 class与style绑定（3）绑定内联样式-优快云博客

本文介绍了Vue.js中如何使用v-bind:style进行样式绑定，包括对象语法和数组语法的应用，并展示了如何通过数据对象动态改变元素样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin-bottom: 20px;
        }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
    <!--
    v-bind:style 的对象语法十分直观——看着非常像 CSS ，
    其实它是一个 JavaScript 对象。
    CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：
    -->
    <div id="demo1" v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">字体颜色 字号</div>

    <div id="demo2" v-bind:style="styleObject">直接绑定一个样式对象，让模版更清晰</div>

    <!--v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：-->
    <div v-bind:style="[baseStyles, overridingStyles]">

<!--
    当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
-->
    <script>
        var demo1 =new Vue({
            el:'#demo1',
            data:{
                activeColor:'red',
                fontSize:30
            }
        })
        var demo2 =new Vue({
            el:'#demo2',
            data:{
                styleObject:{
                    color:'red',
                    fontSize:'30px'
                }
            }
        })
    </script>
</body>
</html>