vue中动态绑定class方法

1、 页面内容

<div class="detail-right" >
    <h1 class="title" >{{ item.supplyName }}</h1 >
    <p class="right-desc" >产品分类：{{ item.category }}</p >
    <p class="right-desc" >型号：C123</p >
    <p class="right-desc" >单位：{{ item.unit }}</p >
    <p class="right-price" >单价：{{ item.price == 0 ? '价格面议' : item.price }}</p >
    <div class="btn" v-if="isInquiry" >
        <span class="btn1" @click="aQuoteNowHandle" >立即询价</span >
        <span v-if="item.isCollect === false" class="btn2" @click="collectionHandle">加入收藏</span >
        <span v-else class="btn2" >已收藏</span >
    </div>
    <h2 :class="{title:isInquiry,titleDesc:!isInquiry}" >服务描述</h2 >
    <div class="text-desc" v-html="item.description" ></div >
</div >

2、js写法

<script setup >
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
//当前用户所属角色集合
const roles = computed(() => userStore.roles);
const isInquiry=roles.value.includes('demand');//角色集合中是否包含demand角色
</script>