vue点击事件， 循环出来的关注列表 ，点击只关注其中一个并改变样式

这个适合大家参考，你们要是直接复制粘贴的话效果是出不来的，因为里面用了组件和api，

<template>
    <ul class="consultantSearch">
        <li class="consultantSearchLayout"  v-for="(consultantItem,consultantIndex) in consultantContent" :key="consultantIndex">
            <div class="consultantInfo">
                <div class="photo">
                    <img class="protrait" :src="CommonJs.PHOTO_SRC+consultantItem.member.facePic" alt="">
                    <!-- sex 0保密 1男 2女-->
                    <img class="sex" v-if="consultantItem.member.sex=='0'" src="@/common/img/consultant_search_secret@2x.png" alt="">
                    <img class="sex" v-else-if="consultantItem.member.sex=='1'" src="@/common/img/consultant_search_man@2x.png" alt="">
                    <img class="sex" v-else-if="consultantItem.member.sex=='2'" src="@/common/img/consultant_search_woman@2x.png" alt="">
                </div>
                <div class="name">
                    <p class="nickName">{{consultantItem.member.nickName}}</p>
                    <p class="nickLevel" v-if="consultantItem.classify =='0'">初级咨询师</p>
                    <p class="nickLevel" v-else-if="consultantItem.classify =='1'">高级咨询师</p>
                    <p class="nickLevel" v-else-if="consultantItem.classify =='2'">资深咨询师</p>
                </div>
                <div class="attention" v-for="(conItem,conIndex) in conectList" :key="conIndex" v-if="conIndex==consultantIndex">
                    <router-link  :to="{path:'/DetailConsultant',query:{id:consultantItem.counselorId}}"  tag="span">
                        咨询师首页
                    </router-link>
                    <span v-if="conItem==0" @click="clickAbout(consultantItem.memberId,consultantIndex)">+关注</span>
                    <span v-else-if="conItem==1" style="color:#97979f;border:1px solid #97979f" @click="aboutTips">已关注</span>
                </div>
            </div>
            <div class="consultantData">
                <p class="certification">
                    <!-- 0否 1是 -->
                    <img v-if="consultantItem.member.isRealnameAuth =='0'" src="@/common/img/consultant_search_name_certification_no@2x.png" alt="">
                    <img v-else-if="consultantItem.member.isRealnameAuth =='1'" src="@/common/img/consultant_search_name_certification@2x.png" alt="">
                    <span v-if="consultantItem.member.isRealnameAuth =='0'">未实名认证</span>
                    <span v-else-if="consultantItem.member.isRealnameAuth =='1'">已实名认证</span>
                    <img v-if="consultantItem.member.isSkillsAuth =='0'" src="@/common/img/consultant_search_profession_certifition_no@2x.png" alt="">
                    <img v-else-if="consultantItem.member.isSkillsAuth =='1'" src="@/common/img/consultant_search_profession_certifition@2x.png" alt="">
                    <span v-if="consultantItem.member.isSkillsAuth=='0'">职业未认证</span>
                    <span v-else-if="consultantItem.member.isSkillsAuth=='1'">职业已认证</span>
                </p>
                <p class="number">
                    <span>{{consultantItem.member.followsTotal}}</span>
                    <span>{{consultantItem.member.fansTotal}}</span>
                    <span>{{consultantItem.member.likesTotal}}</span>
                    <span>{{consultantItem.member.collectsTotal}}</span>
                </p>
                <p class="title">
                    <span>关注</span>
                    <span>粉丝</span>
                    <span>获赞</span>
                    <span>收藏</span>
                </p>
                
            </div>
        </li>


    </ul>
</template>

<script>
import { saveMemberFollow } from "@/request/api.js";
import { Toast } from 'mint-ui'
    export default {
        data() {
            return {
                consultantContent:[],
                fllowed:false,
                isAbout:"",
                conectList:[]
            }
        },
       
        props:{
            consultantList:{
                type:false,
                default:function(){
                    return []
                }
            },
           
            
        },
        watch:{
            consultantList:{
                deep:true,
                handler(newVal,oldVal){
                    this.consultantContent = newVal;

                    for (let i = 0; i < this.consultantContent.length; i++) {
                    this.conectList[i]= this.consultantContent[i].followStatus;
                    }
                }
            },
           
        },
        methods:{
            clickAbout(id,index){
                // this.$router.go(0)
                // this.fllowed=!this.fllowed
                 this.infoExist();
                // console.log("qqq"+JSON.stringify(this.newMemberIdArr))
                let userInfo = this.$store.getters.userName;
                userInfo = JSON.parse(userInfo);
                saveMemberFollow({
                    memberId:userInfo.memberId,
                    toMemberId:id,
                }).then(res=>{
                    Toast(res.msg)
                    this.$set(this.conectList,index,'1');
                })
            },
             infoExist(path){  //判定是否登录注册过
                let userInfo = this.$store.getters.userName;
                console.log("打印个人："+userInfo);
                userInfo = JSON.parse(userInfo);
                if(userInfo==''||userInfo ==undefined||userInfo==null){
                    Toast("查看个人信息需要登录注册！")
                    let that = this;
                    setTimeout(function(){
                        that.$router.push('/Login');
                    },500);
                    return;
                }
                if(path==''||path ==undefined||path==null){
                    return;
                }
                this.$router.push(path);
            },
            aboutTips(){
                Toast("已关注")
            }
        }

    }
</script>

<style  scoped>
.consultantSearch{
    padding: 0 .24rem;
}
.consultantSearch li{
    margin-bottom: .32rem;
    border: 1px solid #e7eaf0;
    border-radius: 5px;
    padding: .24rem;
}
.consultantSearch li .consultantInfo{
    display: flex;
    align-items: flex-start;
}
.consultantSearch li .consultantInfo .photo{
    width: 27%;
    position: relative;
}
.consultantSearch li .consultantInfo .photo .protrait{
    position: absolute;
    top: 0;
    left: .24rem;
    z-index: 5;
    width: 45px;
    height: 45px;
    border-radius: 45px;
    border:1px solid #FA7D00;
    background-color: #fff;
}
.consultantSearch li .consultantInfo .photo .sex{
    position: absolute;
    top: .24rem;
    left: .64rem;
    z-index: 4;
    width: 50px;
    height: 21px;
}
.consultantSearch li .consultantInfo .name{
    width: 30%;
    position: relative;
}
.consultantSearch li .consultantInfo .name p{
    position: absolute;
    left: 0;
    width: 100%;
    font-family: PingFangSC-PingFang SC Regular,Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #141418;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
}
.consultantSearch li .consultantInfo .name .nickName{
    top: 0;
    font-weight: bold;
}
.consultantSearch li .consultantInfo .name .nickLevel{
    top: .52rem;
    color: #5F5F6B;
    font-size: 12px;
}
.consultantSearch li .consultantInfo .attention{
    width: 43%;
    font-size: 14px;
    height: 45px;
    line-height: 45px;
    text-align: right;
    white-space: nowrap;
}
.consultantSearch li .consultantInfo .attention span{
    display: inline-block;
    font-family: PingFangSC-PingFang SC Regular,Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FA7D00;
    border:1px solid #FA7D00;
    border-radius: 5px;
    height: 22px;
    line-height: 22px;
    padding: 0 .16rem;
}
/* .consultantSearch li .consultantData{
 
} */
.consultantSearch li .consultantData .certification{
    font-size: 12px;
    padding:  0 0 0 1.7rem;
    height: .72rem;
    line-height: .72rem;
}
.consultantSearch li .consultantData .certification img{
    width: .25rem;
    height: .24rem;
    display: inline-block;
}
.consultantSearch li .consultantData .certification span{
    font-family: PingFangSC-PingFang SC Regular,Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #97979f;
    height: .24rem;
    line-height: .24rem;
    padding: 0 .16rem 0 0;
    display: inline-block;
}
.consultantSearch li .consultantData .number,
.consultantSearch li .consultantData .title{
    display: flex;
    align-items: center;
    
}
.consultantSearch li .consultantData .number{
    padding: .16rem 0 .24rem 0;
}
.consultantSearch li .consultantData .number span{
    font-family: PingFangSC-PingFang SC Regular,Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #5F5F6B;
    font-weight: bold;
    text-align: center;
    width: 25%;
}
.consultantSearch li .consultantData .title span{
    width: 25%;
    font-family: PingFangSC-PingFang SC Regular,Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #97979f;
    font-weight: bold;
    text-align: center;
}
</style>

出来仅供大家参考