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

Z时代
2024-01-10
分类：综合

vue

一、总结

一句话总结：

如果属性名中带有短线必须加引号，比如： 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、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="./lib/vue-2.4.0.js"></script>
10 </head>
11 
12 <body>
13   <div id="app">
14     <!-- 对象就是无序键值对的集合 -->
15     <!-- <h1 :style="styleObj1">这是一个h1</h1> -->
16 
17     <h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
18   </div>
19 
20   <script>
21     // 创建 Vue 实例，得到 ViewModel
22     var vm = new Vue({
23       el: '#app',
24       data: {
25         styleObj1: { color: 'red', 'font-weight': 200 },
26         styleObj2: { 'font-style': 'italic' }
27       },
28       methods: {}
29     });
30   </script>
31 </body>
32 
33 </html>