之前说过 v-bind 这东西可以绑class 那么必然也可以绑定实style 了，而且 也有 对象语法 和 数组语法：
先来对象语法：
因为我们知道 对象语句是 键 - 值 对的，所以呢 我们的键是 style 的属性，值是对应的值即可，值可以是变量也可以是字符串，如果值不是Vue中的变量，值要加单引号！不然报错.
还有一个点： 比如字体大小 font-Size 其中可以省略掉-，有些版本不省略会报错的.
Vue会当做一个变量来解析.
例如我要字体大小50px 而且 字体颜色 是 红色，那么：
错误写法：
<div class="app">
<!-- 下面的是错误写法，因为VUE会把 50px 和 red 当做一个变量来解析，找不到那就报错了 -->
<p :style="{fontSize: 50px,color:red}">颜色：red 字体大小： 50 px</p>
</div>
正确写法：
<div class="app">
<p :style="{fontSize: '50px',color:'red'}">颜色：red 字体大小： 50 px</p>
</div>
<script>
const app = new Vue({
el:".app",
})
</script>
，所以你的值可以是一个变量：【在Vue中的data先定义哦】
<div class="app">
<p :style="{fontSize: size + 'px',color:fontColor}">颜色：red 字体大小： 50 px</p>
</div>
<script>
const app = new Vue({
el:".app",
data:{
size:50,
fontColor:"red"
}
})
</script>
所以呢 绑定这个有什么用，因为响应式 用户就可以在你这里很快速选择某些样式 然后直接改变即可，复用性挺高.
数组语法：【比较不用】
因为我们知道数组是没有键值对的 所以呢我们可以直接在数组里面加Vue的变量，变量里面都定义好的数据（键值对）：
<div class="app">
<p :style="[color_red,font_size]">颜色：red 字体大小： 50 px</p>
</div>
<script>
const app = new Vue({
el:".app",
data:{
color_red:{color:'red'},
font_size:{fontSize:'50px'}
}
})
</script>
看代码可知道 这样的话肯定要先学对象语法，在学这玩意， 所以还不如直接用对象语法呢，
Tips：Vue中变量 定义 的键值可以有很多很多；上面定义了一个，所以主题逻辑就可以这样写了，
其次你完全也可以在数组里直接干[{xxx},{xx}] 但很画蛇添足 没用.
作者：咸瑜
APP 