一、最简单的绑定
<div :class="{'active':isActive}"></div> data:{ isActive:true }
二、三元表达式来根据条件切换class
<div :class="[isActive ? activeclass : '',errorclass]"></div> data:{ isActive:true, activeclass :'active', errorclass:'error' }
三、使用data
:class="classobject"
data(){
return{
classobject:{ active: ture, sort: false}
}
}
四、使用computed
<div id="demo">{{ fullName }}</div> var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar2', }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } });