v-if和v-else判断的巧用

哪里不显示就把v-if 加在哪个标签上

要显示的地方 加上v-else

我想要实现的是,如果距离报价截止时间还有,就正常显示,如果报价截止时间无的时候,就显示报价已结束
在这里插入图片描述在这里插入图片描述
代码如下:

<view class="font">
            <text class="number">{{ item.enquiry.enquiry_num }}text>
            <view v-if="time">报价已结束view>
            <view v-else>
              <text>距报价截止还剩:text>
              <text class="f1">{{ dd }}text><text class="f2">{{ hh }}text><text class="f3">{{ mm }}text>view>
          view>

data里需要定义:

 data() {
    return {
      time:"",//判断报价时间显示隐藏
      dd: "", //天
      hh: "", //小时
      mm: "", //分钟
    };
  },

然后去发送请求,这里也用到了如何处理后台返回的时间戳,记录一下

 // 获取待报价信息询价单信息
    getToQuoteInfo: function() {
      var that = this;
      wx.request({
        url: that.baseUrl + "/api/quote/quotes",
        method: "GET",
        data: {
          is_adoption: "0",
          enquiry_name: this.enquiry_name,
          quote_id: this.quote_id,
          page: this.page,
          num: this.num
        },
        header: {
          Authorization: "Bearer " + wx.getStorageSync("token")
        },
        success(res) {
          // console.log(res.data.data,'待报价');
          if (res.data.data.length > 0) {
            var result = res.data.data[0];
            // 存储待报价数据总数
            that.total.toquoteTotal = res.data.meta.pagination.total;
            // 处理时间戳
            // that.disposeTimestamp(res.data.data);
            function InitTime(endtime) {
              var dd,
                hh,
                mm,
                ss = null;
              var time =
                (parseInt(endtime * 1000) - new Date().getTime()) / 1000;
              if (time * 1 <= 0) {
                console.log(1);
                // that.hh=0;
                // that.dd=0,
                // that.mm=0
                that.time=true//判断是否报价过期,只需在此改变tiem的状态即可
                return "结束";
              } else {
                console.log(2);
                
                dd = Math.floor(time / 60 / 60 / 24);

                hh = Math.floor((time / 60 / 60) % 24);
                mm = Math.floor((time / 60) % 60);
                ss = Math.floor(time % 60);

                let hr_s = hh > 9 ? hh : "0" + hh;
                let min_s = mm > 9 ? mm : "0" + mm;
                let sec_s = ss > 9 ? ss : "0" + ss;
                that.hh = hh;
                that.dd = dd;
                that.mm = mm;//将处理好的时间赋值给data里
                // that.time=true
              }
            }
            InitTime(result.quote_expire_date);//处理时间戳的数据

你可能感兴趣的:(前端)