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

运行后果