黑马vue---17、vue中通过属性绑定绑定style行内样式

时间：2021-12-03 17:57:44

黑马vue---17、vue中通过属性绑定绑定style行内样式

一、总结

一句话总结：

如果属性名中带有短线必须加引号，比如： h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }

h1 :style="styleObj1"

二、内容在总结中

1、使用内联样式

### 使用内联样式

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

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>
```

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

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

 </head>

 <body>

   <div id="app">

     <!-- 对象就是无序键值对的集合 -->

     <!-- <h1 :style="styleObj1">这是一个h1</h1> -->

     <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>

   </div>

   <script>

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {

         styleObj1: { color: 'red', 'font-weight': 200 },

         styleObj2: { 'font-style': 'italic' }

       },

       methods: {}

     });

   </script>

 </body>

 </html>
 

相关文章