■能够利用 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>

运行后果