v-bind指令动态绑定内联样式（style）

数据绑定（v-bind指令）另一个常见需求是操作元素的内联样式。因为它是属性，我们可以用 v-bind 处理它们
我们只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind 用于 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）

<template>
  <div id="app">
    <p v-bind:style="{color:colorStyle,fontSize:fontSizeStyle+‘px‘}">
      例如，如果isFontSize的值为true，class列表将变为 "bg active font-size"
    </p>
  </div>
</template>

<script>
export default {
  name: ‘app‘,
  data () {
    return {
      colorStyle: ‘red‘,
      fontSizeStyle: 20
    }
  }
}
</script>
<style>

</style>

直接绑定到一个样式对象通常更好，让模板更清晰

p.p1 { margin: 0.0px 0.0px 0.0px 42.0px; text-align: justify; text-indent: 21.0px; font: 7.5px STSong; color: #000000 }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 42.0px; text-align: justify; text-indent: 21.0px; font: 7.5px STSong; color: #000000 }
span.s1 { }