<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>
v-bind:class="['order-no',{'active':totalCount>0}]"
可以做如下修改:
<span class="order-no" :class="{'active':totalCount>0,'order-no':totalCount<=0}" v-link="'/order'">已点菜单</span>