style绑定

# 2、style 绑定

下面是 style 绑定样式示例：

<template>  
<div id = 'root'>
  <div class="basic" :style=styleObj>绑定style样式对象写法</div> <br><br>
  <div class="basic" :style=styleArr>绑定style样式数组写法</div> 

</div>
</template>  
  
<script>  
export default {  
  data() {  
    return {  
       styleObj:{
          fontSize:'30px',
          color:'red',
          backgroundColor:'#ccc'
       },
       styleArr:[
          {fontSize:'30px',color:'red'},
          {backgroundColor:'#ccc'}
       ]
    };  
  }
  
};  
</script>
<style scoped>
.basic{
  width: 400px;
  height: 100px;
  border:1px solid #000;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

结果展示：

总结：

使用对象语法时，属性的名称应该使用驼峰命名法（ camelCase ），而不是短横线分隔（ kebab-case ）。Vue 会自动将这些属性转换为对应的 CSS 属性。当使用数组形式绑定样式时，Vue 还会自动合并数组中的样式对象。

#Vue2

上次更新: 2024/05/24, 16:24:13

← class绑定条件渲染→