8. Vue - v-bind 绑定 Style 对象语法 和 数组语法
Posted 咸咸瑜瑜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了8. Vue - v-bind 绑定 Style 对象语法 和 数组语法相关的知识，希望对你有一定的参考价值。
之前说过 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] 但很画蛇添足 没用.
作者：咸瑜
以上是关于8. Vue - v-bind 绑定 Style 对象语法 和 数组语法的主要内容，如果未能解决你的问题，请参考以下文章
[vue]v-bind: sytle/class-bind&属性值绑定