8. Vue - v-bind 绑定 Style 对象语法和 数组语法

胸怀万里世界, 放眼无限未来。这篇文章主要讲述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 对象语法和 数组语法】


    推荐阅读