vue在父组件中改变子组件渲染列表中第一个的样式怎么弄？

Question

vue项目父组件中用法：

 <div class="projectHeight">
    <pathology-annotation-users :key="index" :user2="project.addTagDoctor2"
        :user1="project.addTagDoctor1" :image="project.src"
        v-for="(project,index) in projectList"
        class="annotationLists"></pathology-annotation-users>
</div>

<template>
    <div class="path-annotation-users-card">
        <div class="pathology-annotation-image-box">
            <img :src="image || '/image/annotation.png'" width="48px" height="48px"/>
        </div>
        <div>
            <div>{{user1}}</div>
            <div style="margin-top: 15px;">{{user2}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PathologyAnnotationUsers",
        props: ['image', 'user1', 'user2'],
    }
</script>

<style scoped>
    .path-annotation-users-card {
        padding: 20px 15px;
        width: 130px;
        font-size: 12px;
        display: flex;
        border: 1px solid rgba(64, 64, 64, 0.38);
        border-bottom: 0;
        border-radius: 3px;
    }
    .pathology-annotation-image-box {
        height: 48px;
        width: 48px;
        margin-right: 15px;
    }
</style>

渲染结果如下：

现在想改变列表中第一项的背景色并没有什么作用应该怎么改
.annotationLists:nth:child(1){

background:red;

}

Answer 1

可以传递参数，然后子组件根据参数判断，绑定不同的class类名，例如参数isActive,子组件渲染的时候判断一下，
:class="[item.isActive === true ? 'class1' : 'class2']"

Answer 2

 <div class="projectHeight">
    <pathology-annotation-users :key="index" :user2="project.addTagDoctor2"
        :user1="project.addTagDoctor1" :image="project.src"
        v-for="(project,index) in projectList"
        class="annotationLists" :index="index"></pathology-annotation-users>
</div>

循环的时候传一个index过去，子组件接收这个值，这个值为0给class就行