8. Vue

之前说过 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}] 但很画蛇添足 没用.