Vue学习笔记：v-bind动态绑定style

■可以利用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>

运行结果