使用内联样式-优快云博客

本文深入讲解Vue中样式绑定的三种方式：直接在元素上通过`:style`使用样式对象，将样式对象定义在`data`中并通过`:style`引用，以及在`:style`中通过数组引用多个`data`上的样式对象。每种方式都有详细的代码示例，帮助读者更好地理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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',
                width:'500px',
                height:'500px'
            }
        }
    });
    </script>