Vue动态事件绑定

class与style事件绑定有三种:分别为(1)对象(2)数组(3)表达式

• class 对象事件绑定如何来使用的呢 看如下代码

 .isi{
           height: 100px;
           width: 100px;
           background: red;
       } 写了一个样式用来绑定
下面看data
  data:{
              msg:true
          }
将样式绑定给数据模型
   <div :class="{isi:msg}"></div>
    

我们要知道class对象绑定得方式如下 {
classNanme:数据模型
}
数组方式

看方式:
      <div :class="[msg]"></div>
看data
        data:{
             msg:"isi"
        }
        这里用第一个案例的样式  我们将样式直接绑定给msg

表达式

这里我们添加一个为isi2的样式
 .isi2{
        height: 100px;
           width: 100px;
           background: red;
       }
   看如何绑定的
         <div :class="msg>6?'isi':'isi2'"></div>
    
   看data
          data:{
            msg:5,
        }

那么学习完calss动态绑定样式之后我们来学习一下style如何绑定
对象绑定

首先先看data 
         data:{
              msg:"这是style 对象绑定",
              "color":"red",
              "fontSize":"50px",
              }
       来看div 如何绑定
      <div :style="{color:color,fontSize:fontSize}">{{msg}}</div>

数组绑定

 <div :style="[arr]">{{msg}}</div>
 看data:
       data:{
            msg:"这是style 数组绑定",
               arr:{
                   color:"red",
                   background:"yellow",
                   fontSize:"50px",
               }
           }

表达式绑定

    <div :style="ms"></div>
    看data:
data:{
            msg:"这是style 表达式绑定",
               ms:{
                   color:"red",
                   background:"yellow",
                   fontSize:"50px",
               }
           }

如上就是动态事件绑定 在下也是新手 如果有不懂的地方请去https://cn.vuejs.org/v2/guide/class-and-style.html#%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95 Vue官网学习 谢谢