vue-根据后端接口返回的数据决定图片的显示与否

html:

	  <div v-if="PI"><img src="@/images/bg_02.png" class="part_1" /></div>
      <div v-if="BTC"><img src="@/images/bg_03.png" class="part_2" /></div>
      <div v-if="ETH"><img src="@/images/bg_04.png" class="part_3" /></div>
      <div v-if="FORCE"><img src="@/images/bg_05.png" class="part_4" /></div>
      <div v-if="Ultimate"><img src="@/images/bg_06.png" class="part_5" /></div>

js:

data() {
    return {
      isJump: false,
      walletAddr: "",
      privateCode: "", //邀请码
      nftList: [],
      BTC:true,
      ETH:true,
      FORCE:true,
      PI:true,
      Ultimate:true
    };
  },
axios
        .post(url, qs.stringify(obj))
        .then((res) => {
          console.log("nft数:");
          console.log(res.data.data);
          res.data.data.forEach(element => {
            console.log(element)
            this.nftList.push(element.nftType)
          });
          console.log(this.nftList)
          //判断接口是否传过来BTC
          let isBTC = this.nftList.indexOf('BTC')
          console.log(isBTC)
          if(this.nftList.indexOf('BTC')<0){
            this.BTC = false
          }
          if(this.nftList.indexOf('ETH')<0){
            this.ETH = false
          }
          if(this.nftList.indexOf('FORCE')<0){
            this.FORCE = false
          }
          if(this.nftList.indexOf('PI')<0){
            this.PI = false
          }
          if(this.nftList.indexOf('Ultimate')<0){
            this.Ultimate = false
          }
        })
        .catch((err) => {
          alert("nft数获取失败");
        });

在这里插入图片描述


版权声明:本文为SDAW_1原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。