Vue-class与style

class与style

绑定HTML Class

对象语法

<div id='box'>
    <div :class='classObj'>动态绑定ClassName</div>
</div>

new Vue({
    el:'#box',
    data:{
        classObj:{
            aa:1,//true则显示该class名，false则不会
               bb:0,
            cc:1
        }
    }
})

数组语法

<div id='box'>
    <div :class='classArr'>动态绑定ClassName</div>
</div>

new Vue({
    el:'#box',
    data:{
        classArr:['aa','cc']//数组里有的都会显示为className
    }
})

绑定内联样式

对象语法

<div id='box'>
    <div :style='styleObj'>动态修改样式</div>
</div>

new Vue({
    el:'#box',
    data:{
        styleObj:{
            backgroundColor:'#14c145'
        }
        //注意，直接用this.styleObj.属性=val，是无法渲染页面的，必须要使用
        // Vue.set(this.styleObj,属性,val)才可以渲染页面
    }
})

数组语法

<div id='box'>
    <div :class='styleArr'>动态修 改样式</div>
</div>

new Vue({
    el:'#box',
    data:{
        styleArr:[{
            backgroundColor:"#14c145",
            fontSize:'12px'
        }]//注意，往数组中push对象，可以渲染页面
        //this.styleArr.push({color:'red'})
    }
})

#####对象方法
-最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）

:class="{ 'active': isActive }"

1
判断是否绑定一个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
$$
（注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染）
:class=”[isActive?’active’:’’]”
或者
:class=”[isActive==1?’active’:’’]”
或者
:class=”[isActive==index?’active’:’’]”
或者
:class=”[isActive==index?’active’:’otherActiveClass’]”
$$
数组对象结合动态判断
//前面这个active在对象里面可以不加单引号，后面这个sort要加单引号

:class="[{ active: isActive }, 'sort']"
或者
:class="[{ active: isActive===1 }, 'sort']"
或者
:class="[{ active: isActive===index }, 'sort']"