vue中v-bind绑定style属性设置内联样式

vue组件中v-bind可以绑定style属性，设置元素的内联样式。

1.绑定对象

<template>
  <div :style="{color: 'red', width: '23px'}">kkfor.com</div>
</template>
<script>
export default {

}
</script>

style中可以绑定对象，设置属性值，渲染后为<div style="color: red; width: 23px;">kkfor.com</div>

注： 当style中绑定的是对象，对象的键值必须是标准命名，当遇到-的时候，可以转换为驼峰命名，也可以加引号

<template>
  <div :style="{fontSize: '16px', 'padding-top': '20px'}">kkfor.com</div>
</template>
<script>
export default {

}
</script>

渲染后为<div style="font-size: 16px; padding-top: 20px;">kkfor.com</div>

绑定data中的对象同样的道理

<template>
  <div :style="styles">kkfor.com</div>
</template>
<script>
export default {
  data() {
    return {
      styles: {
        color: 'red',
        fontSize: '16px',
        'padding-top': '20px'
      }
    }
  }
}
</script>

2.绑定数组

<template>
  <div :style="styles">kkfor.com</div>
</template>
<script>
export default {
  data() {
    return {
      styles: [
        {
          color: 'red',
        },
        {
          fontSize: '16px',
          'padding-top': '20px'
        }
      ]
    }
  }
}
</script>

绑定数组时，数组中可以放多个样式的对象，数组中的数据都会被渲染到页面上，渲染后为<div style="color: red; font-size: 16px; padding-top: 20px;">kkfor.com</div>