vue条件渲染，v-bind的使用问题：当totaltCount<0的时候active的样式还是会存在？

Question

<template>
    <div class="cart">已点<span class="totalCount">{{totalCount}}</span>道菜
    <span v-bind:class="{'order-no active':totalCount>0,'order-no':totalCount<=0}" v-link="'/order'">已点菜单</span>
    </div>
</template>
<script>
import * as Getters from '../../src/vuex/getter.js'
export default{
    vuex :{
        getters:{
            totalCount:Getters.totalCount
        }
    },
}
</script>
<style lang="scss"scoped>
.cart{
    position: fixed;
    background:rgb(58, 54, 53);
    display:flex;
    align-items:center;
    color:white;
    width: 100%;
    height: 50px;
    justify-content:space-between;
    bottom: 0;
    z-index:10;
    .order-no{
        background-color: rgb(107, 97, 94);
        width: 120px;
        height: 50px;
        line-height:50px;
        text-align:center;
        color:white !important;
    }
    .active{
        color:red;
        background-color:red !important; 
}
}
</style>

Answer 1

可以做如下修改：

<span class="order-no" :class="{'active':totalCount>0,'order-no':totalCount<=0}" v-link="'/order'">已点菜单</span>

Answer 2

v-bind:class="['order-no',{'active':totalCount>0}]"