vue 点击图标，手机号用*显示，图标改变， 再次点击恢复手机号，图标改变

vue   点击图标，手机号用*显示，图标改变， 再次点击恢复手机号，图标改变

我写的效果

仅供参考

<template>
  <div>
  
     <!-- 头部 -->
    <v-header
      @slideFlagAction="slideFlagAction"
      :headerFlag="headerFlag"
      :headerText="headerText"
      :openFlag="openFlag"
      :shareFlag="shareFlag"
    ></v-header>

    <div class="padding" :style="{'left':slide?'73%':'0'}">
      <div class="layout">
      <div class="contractWarp" v-for="(contractItem,contractIndex) in contractList" :key="contractIndex" :id="contractItem.contractId">
        <div class="contractBox">
          <div class="contractId">
            <label>合同编号</label>
          </div>
          <div class="contractTime">
            <label>{{contractItem.contractNo}}</label>
            <label>{{contractItem.createTime}}</label>
          </div>
        </div>
        <div class="contractState">
          <div>已审核</div>
        </div>
        <div class="contractBox">
          <div class="contractName">
            <label>租房地址</label>
          </div>
          <div class="contractAddress">
            <label>{{contractItem.zoneInfo1.zoneName}}</label>
            <label>{{contractItem.zoneInfo2.zoneName}}</label>
            <label>{{contractItem.zoneInfo3.zoneName}}</label><br/>
            <label>{{contractItem.houseAddress}}</label>
            <label>{{contractItem.houseRoom}}</label>
          </div>
        </div>
        <div class="contractBox">
          <div class="contractName">
            <label>承租人</label>
          </div>
          <div class="contractAddress">
            <label>{{contractItem.tenantName}}</label>
            <label v-if="tenantPhoneArray" v-for="(phoneItem,phoneIndex) in tenantPhoneArray" :key="phoneIndex">
              <span v-if="phoneIndex === contractIndex">{{phoneItem}}</span>
            </label>
            <div class="contractIcon" @click="tenantSeeAction(contractIndex)">
              <img v-if="tenantPhoneArray[contractIndex]!==phoneArray.tenantPhone[contractIndex]" src="@/common/img/list_check_detail@2x.png" alt="">
              <img v-else src="@/common/img/list_check_detail_no@2x.png" alt="">
            </div>
          </div>
        </div>
        <div class="contractBox">
          <div class="contractName">
            <label>出租人</label>
          </div>
          <div class="contractAddress">
            <label>{{contractItem.landlordName}}</label>
            <label v-if="landlordPhoneArray" v-for="(phoneItem,phoneIndex) in landlordPhoneArray" :key="phoneIndex">
              <span v-if="phoneIndex == contractIndex">{{phoneItem}}</span>
            </label>
            <div class="contractIcon" @click="landlordSeeAction(contractIndex)">
              <img v-if="landlordPhoneArray[contractIndex].indexOf('****')>-1" src="@/common/img/list_check_detail@2x.png" alt="">
              <img v-else src="@/common/img/list_check_detail_no@2x.png" alt="">
            </div>

          </div>
        </div>
        <div class="contractPhoto">
          <div v-for="(imgItem,imgIndex) in contractImgList" :key="imgIndex">
            <img :src="CommonJs.PHOTO_SRC+imgItem" alt />
          </div>
        </div>
      </div>
     
      <v-copy></v-copy>
      </div>
    </div>
  </div>
</template>

<script>
import TitleHeader from "@/components/TitleHeader.vue";
import CopyRightEndtion from "@/components/CopyRightEndtion.vue";
//接口
import { getContractListByMemberId } from "@/request/api.js";
export default {
   components: {
    "v-header": TitleHeader,
    'v-copy':CopyRightEndtion,
  },
  data() {
    return {
      headerFlag: true,
      headerText: "",
      openFlag: false,
      slide: false,
      shareFlag:true,

      contractList:[],
      phone:'',
      contractImgList:[],
      //手机号数组
      phoneArray:{tenantPhone:[],landlordPhone:[]},
      // phoneFlag:true,

      tenantPhoneArray:[],
      landlordPhoneArray:[],


      tenantSeeFlag:true,
      landlordSeeFlag:false,
      newVal:[],
      phones:[]

     
    };
  },
  watch:{
    contractList:{
      deep:true,
      handler(newVal,oldVal){
        this.kkArr = newVal;
        console.log(newVal);
      }
    },
    tenantPhoneArray:{
      deep:true,
      handler(newVal,oldVal){
        this.tenantPhoneArray = newVal;
        let mmm = newVal;
        mmm = JSON.stringify(mmm);
        console.log("触发了cccc："+mmm);
      }
    },
    landlordPhoneArray:{
      deep:true,
      handler(newVal,oldVal){
        this.landlordPhoneArray = newVal;
      }
    },
  },
  created(){
    let userInfo = this.$store.getters.userName;
    userInfo = JSON.parse(userInfo);
    getContractListByMemberId({
      memberId:"8a8b80536c936efd016c9371aa460000",
    }).then(res=>{
      if(res.code=='200'){
        console.log(res);
        this.contractList = res.res.data!=[]?res.res.data:[];
        let that = this;
        for(let i=0;i<that.contractList.length;i++){
            that.phoneArray.tenantPhone[i]=that.contractList[i].tenantMobile;
            that.phoneArray.landlordPhone[i]=that.contractList[i].landlordMobile;
            that.tenantPhoneArray[i] = that.contractList[i].tenantMobile;
            that.landlordPhoneArray[i] = that.contractList[i].landlordMobile;
        }
        


        // 图片处理
        for(let i=0;i<this.contractList.length;i++){
            this.contractImgList = this.contractList[i].contractPics.split(',');
        };
        console.log(this.contractImgList)
        
      }
    })
  },

   methods: {
      
    slideFlagAction(flag) {
      this.slide = flag;
      this.openFlag = flag;
    },
    
    
    tenantSeeAction(index){
      let that = this;
      console.log("触发了："+index);
      let oldVal = that.tenantPhoneArray[index];
      let newVal = that.phoneArray.tenantPhone[index];
      console.log("旧知："+oldVal);
      console.log("新知："+newVal);

      if(oldVal !=  newVal){
        that.$set(that.tenantPhoneArray,index,newVal);
      }else{
        that.$set(that.tenantPhoneArray,index, that.CommonJs._formatMobile(newVal));
      }

      let kk = that.tenantPhoneArray;
      kk = JSON.stringify(kk);
      console.log("触发了aaa："+kk);
      
    },
    landlordSeeAction(index){
       let that = this;
      console.log("触发了："+index);
      let oldVal = that.landlordPhoneArray[index];
      let newVal = that.phoneArray.landlordPhone[index];
      console.log("旧知："+oldVal);
      console.log("新知："+newVal);

      if(oldVal !=  newVal){
        that.$set(that.landlordPhoneArray,index,newVal);
      }else{
        that.$set(that.landlordPhoneArray,index, that.CommonJs._formatMobile(newVal));
      }

      let kk = that.landlordPhoneArray;
      kk = JSON.stringify(kk);
      console.log("触发了aaa："+kk);

    }
  }
};
</script>

<style  scoped>
.padding {
  /* padding: 0 0.24rem; */
  font-family: PingFangSC-PingFang SC Regular, Arial, Helvetica, sans-serif;
  position: absolute;
  z-index: 10;
  top: 0.88rem;
  bottom: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all 0.3s linear;
}
.padding .layout {
  padding: 0.24rem 0.24rem 0 0.24rem;
}
.padding .contractWarp {
  border: 1px solid #e7eaf0;
  padding: 0 0.24rem;
  margin-bottom: 15px;
  font-size: 14px;
  border-radius: 5px;
}
.padding .contractWarp .contractBox {
  /* border: 1px solid black; */
  display: flex;
  align-items: baseline;
  color: #141418;

}
.padding .contractWarp .contractState {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.padding .contractWarp .contractState div {
  border: 1px solid #fa7d00;
  padding: 2px 5px;
  color: #fa7d00;
  border-radius: 5px;
  font-size: 12px;
}
.padding .contractWarp .contractBox .contractId {
  width: 20%;
  /* border: 1px solid black; */
  font-size: 14px;
  padding: 0.24rem 0.24rem 0.24rem 0;
}
.padding .contractWarp .contractBox .contractId label {
  /* border: 1px solid black; */
  font-size: 12px;
}
.padding .contractWarp .contractBox .contractTime {
  width: 80%;
  /* border: 1px solid black; */
  font-size: 12px;
  padding: 0.24rem 0 0.24rem 0;
  display: flex;
  justify-content: space-between;
}

.padding .contractWarp .contractBox .contractName {
  width: 20%;
  /* border: 1px solid black; */
  font-size: 14px;
  padding: 0.24rem 0.24rem 0.24rem 0;
}
.padding .contractWarp .contractBox .contractAddress {
  width: 80%;
  /* border: 1px solid black; */
  font-size: 14px;
  padding: 0.24rem 0 0.24rem 0;
  
}
.padding .contractWarp .contractBox .contractAddress .contractIcon{
  width: 17px;
  height: 12px;
  margin-left: 10px;
  display: inline-block;
}
.padding .contractWarp .contractBox .contractAddress div img{
  width: 100%;
  height: 100%;
}
.padding .contractWarp .contractBox .contractAddress label {
  /* margin-right: 5px; */
}
.padding .contractWarp .contractPhoto {
  /* border: 1px solid black; */
  /* display: flex; */
  padding: 0.24rem 0 0.24rem 0;
}
.padding .contractWarp .contractPhoto div {
  display: inline-block;
  /* margin-right: 14px;
  margin-bottom: 14px; */
  /* border: 1px solid red; */
  width: 100px;
  height: 100px;
  border-radius: 5px;
}
.padding .contractWarp .contractPhoto div img {
  width: 100%;
  height: 100%;
}
</style>