vue中样式的书写(绑定内联样式)

vue的内联样式也分为对象语法和数组语法。

无论是哪一种绑定class也好，绑定内联也好，他们的样式都有对象或者数组之分

数组或者对象的关隘在运用了vue中的data进行了一个中转：也就是达到数据驱动视图的目的

注意： v-bind：style的语法外观虽然和css语法极其的相似，其实是作为javascript对象存在的。命名的时候用驼峰命名法，如果用短横线命名法的话，需要用引号括起来命名

1、对象语法

//一种：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}
//第二种也是可以生效的：
 <div
    class="button_container"
    :style="{color:'red',fontSize:'25px'}"
  >
    凡夫俗子
  </div>
//第三种直接绑定一个样式对象通常会更好，会让模板更加的清晰
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
//第四种就是搭配计算属性用了
<div v-bind:style="styleObject"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}
 computed: {
      styleObject: function() {
          return {
              color: this.activeColor,
              fontSize: this.fontSize
          }
      }
  }

2、数组语法

数组语法可以将多个样式对象应用到同一元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>

demo：

v-bind:style的数组语法可以将多个样式对象应用到一个元素上。

<div v-bind:style="[styleObjectA, styleObjectB]">Style 数组语法</div>
javascript代码：

var vm = new Vue({
  el: 'div',
  data: {
  styleObjectA: {
    color: 'red'
  },
    styleObjectB: {
     fontSize: '30px'
  }
}
})
渲染为：

<div style="color: red; font-size: 30px;">Style 数组语法</div>