使用内联样式

1. 直接在元素上通过 `:style` 的形式，书写样式对象
```
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
```

  <div class="box">
        <!-- 内联样式书写为对象形式  其中font-size 必须加引号  
        注意：凡是有横线的都必须加引号 -->
        <h1 :style="{color:'red','font-size':'50px'}">这是一个善良的h1</h1>
    </div>
    
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
    var vm=new Vue({
        el:'.box',
        data:{

        }
    });
    </script>

2. 将样式对象，定义到 `data` 中，并直接引用到 `:style` 中
+ 在data上定义样式：
```
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
```
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
```
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
```

3. 在 `:style` 中通过数组，引用多个 `data` 上的样式对象
+ 在data上定义样式：
```
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
```
+ 在元素中，通过属性绑定的形式，将样式对象应用到元素中：
```
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1

<body>
    <!-- <div class="box">
         内联样式书写为对象形式  其中font-size 必须加引号  
        注意：凡是有横线的都必须加引号 -->
        <!-- <h1 :style="{color:'red','font-size':'50px'}">这是一个善良的h1</h1> -->
    <!-- </div>  -->


    <div class="box">
          <!-- 使用对象形式添加内联样式 -->
            <h1 :style="styleobj">这是一个善良的h1</h1>
        </div>
    
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
    var vm=new Vue({
        el:'.box',
        data:{
            styleobj:{
                color:'red',
                '500px',
                height:'500px'
            }
        }
    });
    </script>

:style 数组的写法

    
    <div class="box">
        <p :style="stylearr">世界之窗，关注你我！</p>
        <input @click="show()" type="button" value="提交">
    </div>

    <script src="vue-2.4.0.js"></script>
    <script>

        new Vue({
            el:'.box',
            data:{
                Iscolor:true,
                colorobj:{
                    red:true,
                    green:true
                },
                //有键值对的需要使用对象数组
                stylearr:[
                    {background:'red'}
                ]
            }