vue中class动态绑定的四种方式

// An highlighted block
<template>
  <div :class="active">{{name}}</div>
  <div :class="{'hover-name':hover, 'visited-name':visited}">
  <div :class="[isActive ? activeClass : '', errorClass]"></div>
  <div :class="[{ 'active-name': isActive }, errorClass]"></div></div>
</template>
<script>
export default{
data(){
  return{
    name:"xiaohong",
    hover:true,
    visited:null,
    activeClass: 'active-name',
    errorClass: 'text-danger'
  }
},
computed:{
  active(){
    if(this.name==='xiaohong'){
       return 'active-name'
       }
    }
  }
}
</script>
<style>
.active-name{
  color:red
}
.hover-name{
color:green
}
.visited-name{
color:blue
}
</style>