vue,mpvue和小程序里面的某个数据进行替换

最新推荐文章于 2024-03-07 15:36:36 发布

颖浩

最新推荐文章于 2024-03-07 15:36:36 发布

阅读量336

点赞数

本文链接：https://blog.csdn.net/weixin_44132829/article/details/107869697

版权

将内部引入的json文件的替换成与之对应的图片，true代表完成了，false代表未完成。完成如下图所示

在这里插入图片描述

我的思路很简单就是替换数据。
下面为实现步骤
1.引入json数据

import Current from "../../../static/datas/currentorders.js"

2.获取数据并打印

export default {
  data () {
    return {
      current:[],
      currentData:[],
    }
  },


  beforeMount() {
    this.fun();
  },

  methods: {
      fun() {
      this.currentData = Current.current_orders;
      this.current=Current.current_orders[0].orders
    }
  }
}

3.替换数据

statues() {                   //赋值将json里的statue：true替换
        this.current.forEach(function (item,index){
          if (item.statues == true){
            item.statues='../../static/tabs/finish.png'
          }else if(item.statues == false){
           item.statues='../../static/tabs/waiting.png'
          }
        })
      }

4.最终结果

export default {
  data () {
    return {
      current:[],
      currentData:[],
    }
  },


  beforeMount() {
    this.fun();
    this.statues();
  },


  methods: {
      fun() {
      this.currentData = Current.current_orders;
      this.current=Current.current_orders[0].orders
    },
      statues() {                   //赋值将json里的statue：true替换成对应图片位置
        this.current.forEach(function (item,index){
          if (item.statues == true){
            item.statues='../../static/tabs/finish.png'
          }else if(item.statues == false){
           item.statues='../../static/tabs/waiting.png'
          }
        })
      }
  }
}

current数据如下显示在这里插入图片描述
替换之后的数据

5.最后在组件van-card里v-for

 <van-card
              v-for="(item,index) in currentData[0].orders"
              :key="index"
              title-class="product-name"
              price-class="product-price"
              num-class="product-num"
              custom-class="product-custom"
              :num="item.number"
              :price="item.price"
              :title="item.name"
              thumb-mode='aspectFill'
              :thumb="item.url"  
            >
              <view slot="footer">
                <image class="wait" :src="item.statues"></image>
              </view>
            </van-card>