我是怎么学会vue的08：v-bind动态绑定style属性

标签的style不写死，而是动态的绑定上去。

在组件化开发的时候常用。

分为两种绑定方式：对象语法和数组语法。对象语法就是把对象绑定给style，数组语法就是把数组绑定给style。

对象语法

<h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>

对象是键值对的形式：键是属性名，值是属性的值，不是布尔值。值需要写到引号里面（字符串），不写引号的话则解析成变量名。变量定义在data里面，如下：

const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize: 100,
      finalColor: 'red',
    }
})

---

如果键值对比较长，也可以把键值对写到方法里面。

<h2 :style="getStyles()">{{message}}</h2>

const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize: 100,
      finalColor: 'red',
    },
    methods: {
      getStyles: function () {
        return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
      }
    }
  })

数组语法（不常用）

<h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>

const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      baseStyle: {backgroundColor: 'red'},
      baseStyle1: {fontSize: '100px'},
    }
})