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/[email protected]" alt="">
<img class="sex" v-else-if="consultantItem.member.sex=='1'" src="@/common/img/[email protected]" alt="">
<img class="sex" v-else-if="consultantItem.member.sex=='2'" src="@/common/img/[email protected]" 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/[email protected]" alt="">
<img v-else-if="consultantItem.member.isRealnameAuth =='1'" src="@/common/img/[email protected]" 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/[email protected]" alt="">
<img v-else-if="consultantItem.member.isSkillsAuth =='1'" src="@/common/img/[email protected]" 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>
出來僅供大家參考