关于Vue中class和style的动态样式绑定

class的相关绑定方法

对象方法

最简单的绑定（这里的active加不加单引号都可以，一样都能渲染,isActive可以是一个值，用来判断是否将active样式绑定到当前的元素上）

//直接根据isActive的值来确定是否绑定
:class="{ 'active': isActive }"
//判断是否绑定一个active
:class="{'active':isActive==-1}"  
//或者
:class="{'active':isActive==index}"`

绑定并判断多个

//第一种（用逗号隔开）
:class="{ 'active': isActive, 'sort': isSort }"
//第二种（放在data里面）
//也可以把后面绑定的对象写在一个变量放在data里面，可以变成下面这样
:class="classObject"
data() {
  return {
    classObject:{ active: true, sort:false }
  }
}
//第三种（使用computed属性）
:class="classObject"
data() {
  return {
    isActive: true,
    isSort: false
  }
},
computed: {
  classObject: function () {
    return {
    active: this.isActive,
    sort:this.isSort
    }
  }
}

数组方法

单纯数组

:class="[isActive,isSort]"
data(){
    return{
        isActive:'active',
        isSort:'sort'
    }
}

数组与三元运算符结合判断选择需要的class

• 其中isActive为data中的变量，active和otherActiveClass为css类名 （注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染）

:class="[isActive==index?'active':'otherActiveClass']"

数组对象结合动态判断 (前面这个active在对象里面可以不加单引号，后面这个sort要加单引号)

//其中isActive为data中的属性，值为true或者false
:class="[{ active: isActive }, 'sort']"

使用数组绑定多个动态对象的时候

:class="[{ active: isActive==index },{ activetitle: isActivetitle==index }]"
//也可以和静态属性结合,其中静态属性要用''
:class="[{ active: isActive==index },'sort']"

style的相关绑定方法

直接绑定属性,其中showmenu为data中的属性

:style="{ transform: showmenu ? 'none' : 'rotateY(180deg)' }"

多个对象的使用，要将对象用数组包含起来

:style="[{ transform: showmenu ? 'none' : 'rotateY(180deg)'},
{ width: showmenu ? '250px' : '60px'}
]"

style也可以对data中的某些属性进行计算或是字符串的拼接

:style="{height: onelevelmenu.openstate ? 38 * onelevelmenu.children.length +'px': '0px'}"