vue 绑定内联样式的写法

1.对象语法（看官网教程的命名方法，截图如下）

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

 

<li :style="{'background-color':bgColor,fontSize:fontSize+'px'}">绑定内联样式对象语法</li>

<div v-bind:style="styleObject"></div>

<script>
export default{
  data(){
    return{
      bgColor:'green',
      fontSize: 30,
      styleObject: {
        color: 'red',
        backgroundColor:'pink',
        'font-size': '13px' 
      }
    }
  }
}
</script>

2.数组语法

<li :style="[baseStyles,overridingStyles]">绑定内联样式数组语法</li>

<script>
export default{
  data(){
    return{
      baseStyles:{
        color: 'red',
        backgroundColor:'yellow',
        'font-size': '13px' 
      },
      overridingStyles:{
       'font-style':'italic'
      }
    }
  }
}
</script>