vue 中 class-style绑定行内样式

-不能作为变量名，-可以作为属性名和类名

一、class动态绑定

属性绑定v-bind

bg bk z-index 为css 样式

1.三元判断

<p :class="(true?'bk':' ' "></p>

2.computed结合

<p :class="active"></p>

computed:{
 active(){
    if(true){
       className="bg"
     }
     return className+"bk
 }
}

3.对象语法

:class="{ bg :this.flag,'z-index':this.temp}"   //falg为true时候添加类名bg

:class="active"   

computed:{
 active(){
     return { bg :this.flag,'z-index':this.temp}
 }
}

4.数组语法

:class="[bkClass,bgClass]" 
 data (){
      return{
             bkClass:'bk',
             bgClass:'bg'
      }
  }

:class="[ true ? bkClass : ' ',bgClass]"   

:class="[ {bkClass :true},bgClass]"   

二、style动态绑定

1.普通用法

:style="{ 'color'：'red', 'fontSize'：'30px'}" 
style="font-size: 14px; color: #7f7f7f; text-align: right"
style="background-color: rgb(207, 62, 62)"

2.对象语法

:style="styleObject"   
   data (){
      return{
          styleObject:{
                 color:'red',
                 fontSize:'30px'
                   }
           
      }
  }

3.数组语法

:style="[styleObject,baseObj]"   
   data (){
      return{
          baseObj:{
                 color:'red',
                 fontSize:'30px'
                   }
           
      }
  }

链接: https://www.cnblogs.com/andyZhang0511/p/11212394.html.