vue中style的绑定

<script>
export default{
  data(){
    return {
      color:"pink",
      fontSize:'20px',
      bgcColor:"blue",
      styleObj:{
        color:"green",
        fontSize:"20px",
        'background-color':'pink'
      }
    }
  }
}
</script>
<template>
  <div>
    <!-- 第一种：放置字符串 -->
    <p style="color:red">style字符串绑定</p>
    <!-- 第二种：对象 -->
    <p style="key(css属性名):value(属性值，来自data)"></p>
    <!-- 推荐使用 camelCase，但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称) -->
    <p :style="{color:color,fontSize:fontSize,'background-color':bgcColor}">style 对象绑定</p>
    <p :style="styleObj">style 直接绑定一个样式对象通</p>
    <!-- 数组样式 -->
    <p :style="[styleObj,{border:'5px solid'}]">数组样式</p>
  </div>
</template>