vue js html에서 시간에 따라 "닫힘" 또는 "열림"을 표시하려면 어떻게 해야 합니까?

vue js html에서 시간에 따라 "닫힘" 또는 "열림"을 표시하려면 어떻게 해야 합니까?

다음은 매장 영업시간을 나타내는 json 데이터입니다.

{
    "status": true,
    "data": {
        "pid": 1,
        "bussinessName": "ard",
        "services": "looking for passionate",
        "inventory": [],
        "workHr": "Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM"
    }
}

Vuejs 코드는 다음과 같습니다.

<script>
    new Vue({
        el: '#feed' ,
        data: {
            data: [],
        },
        mounted() {
            this.$nextTick(function() {
                var self = this;
                var id = 1;
                console.log(id)
                $.ajax({
                    url: "https://n2s.herokuapp.com/api/post/get/"+{{pid}},
                method: "GET",
                    dataType: "JSON",
                    success: function (e) {
                    if (e.status == 1) {
                        self.data = e.data;
                        console.log(e.data)

                        const workHour = e.data.workHr.split(',').map((val) => {
                            const obj = val.split(':');
                        const time = val.replace(`${obj[0]}:`, '');
                        return {
                            day: obj[0],
                            time,
                        }
                    });
                    }
                    else
                    {
                        console.log('Error occurred');}
                }, error: function(){
                    console.log('Error occurred');
                }
            });
            })
        },
    })
</script>

다음 코드를 사용하여 오늘의 작업 시간을 표시합니다.

<div v-for="(item,key) in data.workHr" :key="key">
  <span v-if="new Date().getDay()-1==key">  <img src="/static/assets/img/timer.png">Today :  {{item.time}}</span>    
 </div>

영업시간 외에 근무시간 내인지 여부에 따라 '휴업' 또는 '개업'을 표시해야 합니다.어떻게 구현하면 좋을까요?

우선, 당신의JSON스키마가 잘못된 것 같습니다.수정했습니다.JSON스키마 및 코드로 하드코드하여 삭제한다.AJAX호출하여 코드를 사용할 수 있도록 합니다.교환해 주셨으면 합니다.AJAX네가 직접 전화해라.

설명.
두 개의 라이브러리를 사용하여 날짜/시간을 조작했습니다.첫 번째는 memantjs이고 다른 하나는 플러그인 모멘트 범위입니다.그럼 템플릿 대신 자바스크립트로 날짜를 포맷해서 사용해보겠습니다.range계산방법OPENED그리고.CLOSED상황.저도 추가했습니다.parseTime해석하는 기능time취급용AM/PM.

window['moment-range'].extendMoment(moment);

function parseTime(time, format) {
  var add12 = false;
  if (time.indexOf('PM') > -1) {
    add12 = true;
  }
  time = moment(time.replace('AM', '').replace('PM', ''), 'hh:mm');
  if (add12) {
    time.add(12, 'hours')
  }
  return time;
}

new Vue({
  el: '#feed',
  data: {
    data: [],
  },
  mounted() {
    this.$nextTick(function() {
      var self = this;
      var id = 1;
      self.today_open = false;
      var e = {
        "status": true,
        "data": {
          "pid": 1,
          "bussinessName": "ard",
          "services": "looking for passionate",
          "inventory": [],
          "workHr": "Monday :9:00AM to 10:00PM,Tuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Thursday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM"
        }
      }
      self.data = e.data;
      const workHour = e.data.workHr.split(',').map((val) => {
        const obj = val.split(':');
        const time = val.replace(`${obj[0]}:`, '');
        const time_from = time.split('to')[0].trim();
        const time_to = time.split('to')[1].trim();
        var timeWindow = moment.range(parseTime(time_from), parseTime(time_to));
        return {
          day: obj[0],
          time_from: parseTime(time_from).format('hh:mm A'),
          time_to: parseTime(time_to).format('hh:mm A'),
          today_open: timeWindow.contains(new Date())
        }
      });
      self.data.workHr = workHour
    });
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://npmcdn.com/moment@2.14.1/moment.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment-range/3.0.3/moment-range.js"></script>


<div id="feed">
  <div v-for="(item,key) in data.workHr" :key="key">
    <span v-if="new Date().getDay()-1==key">  Today :  {{item.time_from}} to {{item.time_to}} <span v-if="item.today_open">OPENED</span><span v-if="!item.today_open">CLOSED</span></span>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/47586454/how-can-i-display-closed-or-open-based-on-time-in-vue-js-html