绑定样式

绑定样式

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

此时的font-size: 40px已经固定，无法再改变了，我们需要通过Vue绑定样式，来动态改变style

修改如下：

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

:style 动态绑定，引号里面写成键值对的形式，font-size改为fontSize，因为只有当引号里的表达式是js表达式时，Vue才能解析，font-size是不合法的变量名，所以要改。此时，fSize可以动态改了。

多个style的绑定：

styleObj:{
     fontSize : '40px',
     color:'yellow',
     backgroundColor:'red'
        }   
这些写在data里，:style="styleObj"  style里动态绑定

绑定样式：

1. class样式

   ​ 写法 :class=”xxx“ xxx可以是字符串、对象、数组

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

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

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

2. style样式

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

   :style="[a，b]" 其中a、b是样式对象，样式对象的key不能乱写