Vue v-bind绑定style

v-bind绑定style

• 绑定方式一：对象语法
  ：style="{color: current,fontSize: fontSize + 'px'}"

  • style 后面跟的是一个对象类型
    • 对象的key是css属性
    • 对象的value是具体赋的值，值可以来自data中的属性

• 绑定方式二：数组语法

  <div v-bind:style="[baseStyle, overridingStyle]"></div>

  • style 后面跟的是一个数组类型
    • 多个值以，分割即可

<div id="app">
  <!-- 对象语法 -->
  <!-- <h2 :style='{key（属性名）： value（属性值）}'></h2> -->
  <h2 :style="{fontSize: finsize +'px', color: 'skyblue'}">{{ message }}</h2>
   <!-- 数组语法 -->
  <h2 :style="[baseStyle]">{{ message }}</h2>
 </div>
 <script src="./vue.min.js"></script>
 <script>
 let app = new Vue({
 	el: '#app',
 	data: {
   	message: 'hello',
   	finsize: 16 ,
   	baseStyle: {fontSize: '50px',color: 'red'}
   	}
   })
</script>