题意：如何在 Vue.js 的 HTML 中根据时间显示“关闭”或“开放”？
问题背景：
This is my json data to show the Hours of operation of the shop:
这是我用于显示商店营业时间的 JSON 数据：
{
"status": true,
"data": {
"pid": 1,
"businessName": "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"
}
}
My vuejs code is:
我的 Vue.js 代码是：
<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>
I display today's hours of operations using the following code:
我使用以下代码显示今天的营业时间：
<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>
In addition to their hours of operation, I also need to display "Closed" or "Open" based on whether it is within their working hours or not. How can I implement this?
除了营业时间，我还需要根据是否在工作时间内显示‘关闭’或‘开放’。我该如何实现这一点？
问题解决：
First of all, your JSON schema seems incorrect due to some typo mistake. I fixed the JSON schema and hardcoded it in the code and remove the AJAX call to make the code workable. Hope you can replace it will AJAX call by yourself.
首先，你的 JSON 架构似乎由于一些拼写错误而不正确。我修复了 JSON 架构并将其硬编码到代码中，去掉了 AJAX 调用，以使代码可运行。希望你能自己替换为 AJAX 调用。
Explanation 解释
I have used two libraries to manipulate date/time. First one is momentjs and other one is it's plugin moment-range. Then, I have formatted your dates in JavaScript instead of doing it on template and used range method to calculate the OPENED and CLOSED status. I have also added parseTime function to parse the time for handling AM/PM.
我使用了两个库来处理日期/时间。第一个是 momentjs，另一个是它的插件 moment-range。然后，我在 JavaScript 中格式化了你的日期，而不是在模板中进行，并使用 range 方法来计算开放和关闭状态。我还添加了 parseTime 函数来解析时间，以处理 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,
"businessName": "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/[email protected]/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>