■能够利用v-bind：style来绑定一些CSS内联款式
■在写CSS属性名的时候，比方font-size
— □能够应用驼峰式：==fontSize==
— □或短横线分隔：==’font-size’==
■绑定style的两种形式：对象语法，数组语法

一、对象语法

■style前面跟的是一个对象类型
—→对象的key是CSS的属性
—→对象的value是具体赋的值，值能够来自data中的属性

<div id="app">
  <div v-bind：style="{color:currentColor,fontSize:fontsize+'px'}">{{message}}</div>
</div>

代码示例

<div id="app">
  <!--<h2 :style="{key(属性名):value(属性值)}">{{message}}</h2>-->

  <!--'50px'必须加上单引号，否则是当作一个变量去解析-->
  <!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->

  <!--finalSize1当成一个变量应用-->
  <!--<h2 :style="{fontSize: finalSize1}">{{message}}</h2>-->

  <h2 :style="{fontSize: finalSize2+'px',backgroundColor:finalColor}">{{message}}</h2>

  <!--如果感觉以上一行太长，能够应用methods办法定义一个函数，而后调用这个函数（getStyles()）-->
  <h2 :style="getStyles()">{{message}}</h2>
</div>

运行后果

二、数组语法

■style前面跟的是一个数组类型
–→style 能够应用数组将多个款式对象利用到一个元素上（ex：字体大小，字体色彩，背景色彩…)

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">{{message}}</div>
</div>

代码示例

<div id="app">
  <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Antiann',
      baseStyle:{backgroundColor:'pink'},
      baseStyle1:{fontSize:'100px'}
    }
  })
</script>

运行后果