[Vue] - About vue class dynamic binding of several ways

##### object method
- the most simple binding (where the active plus without the single quotation marks are following the same can be rendered)

：class=“{‘active’:isTrue}”

A judge is bound active

:class="{'active':isActive==-1}" 
或者
:class="{'active':isActive==index}"

And binding judgment more

A first (separated by a comma)

:class="{ 'active': isActive, 'sort': isSort }"

The second (on the data inside) 
// bound objects can also write in the back of a variable in the data inside, can be turned follows

:class="classObject"
data() {
    return {
        classObject:{ active: true, sort:false }
    }
}

The third (computed using attributes)

:class="classObject"
data() {
    return {
        isActive: true,
        isSort: false
    }
},
computed: {
    classObject: function () {
       return {
          active: this.isActive,
          sort:this.isSort
       }
          
　　}
}         

##### Array Methods

Simple array

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

Array and determining binding ternary operator to select the desired class
(note: ternary operator behind ":" class require both sides with an apostrophe, or not rendered properly)

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

Dynamic binding is determined array object
// front of the object which can be active without single quotation marks, followed by the single quotation marks to sort

// The preceding objects which may not be active in the single quotation marks, followed by the single quotation marks to sort 
: class = "[{active: isActive}, 'sort']" 
or 
: class = "[{active: ==. 1 isActive }, 'sort'] " 
or 
: class =" [{Active: isActive index ==}, 'sort'] "

Original link: https: //blog.csdn.net/qq_43077894/article/details/83544399