Vue学习:绑定样式 ：style

普通style样式

<div class="basic" style="font-size: 50px;">{{name}}</div><br>

交给Vue管理 对象写法:style

 <div class="basic" :style="{fontSize:fsize+'px'}">{{name}}</div><br>

 fsize:50,//可以切换

可以进行优化：style里面写对象

 <div class="basic" :style="styleObj">{{name}}</div><br>

   styleObj:{
                    fontSize:40+'px',//js里面都有的
                    color:'red'
                }

数组写法：可以进行优化：style里面写数组，数组里面是样式对象

<div class="basic" :style="[styleObj,styleObj1]">{{name}}</div><br>



  styleObj1:{
                    backgroundColor:'yellow'
                },

数组写法：数组其他写法

 <div class="basic" :style="styleArr">{{name}}</div><br>
 styleArr:[{ backgroundColor:'orange'},{ fontSize:40+'px',color:'red'}]

绑定样式总结 ：style :class

1. 绑定class样式；

:class="xxx"xxx可以是字符串、对象、数组

字符串写法适用于：类名不确定，要动态获取

数组写法适用于：要绑定多个样式，个数不确定，名字也不确定

对象写法适用于：要绑定多个样式，个数确定，名字也确定

2. 绑定style样式

:style="{fontSize:xxx}"，其中xxx是动态值

:style="[a,b]"，其中a。b是样式对象(对象里面的key不可以瞎写 得是存在的css对象的js使用)