样式绑定

绑定样式：

1.class样式：

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

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

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

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

2.style样式：

​ ：style=”{fontSize:xxx}”,其中xxx是动态值

​ : style=”[a,b]”,其中a,b是样式对象

绑定class:

1. 字符串写法：适用于样式的类名不确定，需要动态指定

     <div class="box1" :class="activeclass" @click="getclass">盒子</div>
     
       const vm = new Vue({
               el: '#root',
               data() {
                   return {
                       activeclass: ''
                   }
               },
               methods: {
                   getclass() {
                       this.activeclass = 'box2'
                   }
               },
   
           })
   
          .box1 {
               height: 100px;
               width: 100px;
               background-color: blue;
           }
   
           .box2 {
               border-radius: 4px;
           }
   

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

      <div class="box1" :class="classarr" @click="getclass">盒子</div>
   
              data() {
                   return {
                       classarr: ['class1', 'class2', 'class3']
                   }
               },
               
      .class1{}
      .class2{}
      .class3{}
   

   3.对象写法：适用于要绑定的样式个数确定，名字也确定，但要动态决定用不用

      <div class="box1" :class="classobj" @click="getclass">盒子</div>
   
              data() {
                   return {                            
                       classobj: {
                           class3: false,
                           class4: false
                       }
                   }
               },
               
               
          .class3{}
          .class4{}
   

style样式：

1.对象写法：

<div :style="{fontSize:fsize+'px'}">gg</div>//font-size这种都需要改成驼峰写法
          data() {
               return {                
                    fsize: 40,
                }
            },

//写法二 data() { return { styleobj: { fontSize: '40px' }

​ }
},

2.数组写法

  <div :style="[styleobj,styleobj2]">gg</div>
           data() {
                return {                  
                    styleobj: {
                        fontSize: '40px'
                    },
                    styleobj2: {
                        color: 'green'
                    }

                }
            },

   <div :style="stylearr">gg</div>
            data() {
                return {                
                    stylearr: [{
                        fontSize: '40px'
                    }, {
                        color: 'green'
                    },]

                }
            },