Javascript 将日期属性绑定到多个类
我有一个倒计时组件和一个日期道具。我有多个叫做timer的类,我有我的方法、天数、m等等。你明白了。我的ProjectCountdown组件中有一个静态日期。我想能够使用多个不同的日期,使每个项目都有自己的倒计时 这是密码 ProjectCountdown.vueJavascript 将日期属性绑定到多个类,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我有一个倒计时组件和一个日期道具。我有多个叫做timer的类,我有我的方法、天数、m等等。你明白了。我的ProjectCountdown组件中有一个静态日期。我想能够使用多个不同的日期,使每个项目都有自己的倒计时 这是密码 ProjectCountdown.vue <template> <grid :position="grid"> <Countdown date="March 20, 2017 12:00"></Countdow
<template>
<grid :position="grid">
<Countdown date="March 20, 2017 12:00"></Countdown>
</grid>
</template>
<script>
import Grid from './Grid';
import Vue from 'vue';
import Countdown from './Countdown';
export default {
components: {
Countdown, Grid
},
props: {
grid: {
type: String,
}
}
}
Vue.filter('two_digits', function (value) {
if (value.toString().length <= 1) {
return "0" + value.toString()
}
return value.toString();
});
</script>
<template>
<div id="slideshow">
<div class="timer">
<div class="title-block">
<p class="title">KNHB</p>
<p class="description">Sprint 1</p>
</div>
<div class="column">
<div class="block">
<p class="digit">{{ days | two_digits }}</p>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit">{{ hours | two_digits }}</p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit">{{ minutes | two_digits }}</p>
<p class="text">Minutes</p>
</div>
</div>
</div>
<div class="timer">
<div class="title-block">
<p class="title">MG de Jong</p>
<p class="description">Sprint 2</p>
</div>
<div class="column">
<div class="block">
<p class="digit">{{ days | two_digits }}</p>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit">{{ hours | two_digits }}</p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit">{{ minutes | two_digits }}</p>
<p class="text">Minutes</p>
</div>
</div>
</div>
<div class="timer">
<div class="title-block">
<p class="title">ITIP</p>
<p class="description">Sprint 3</p>
</div>
<div class="column">
<div class="block">
<p class="digit">{{ days | two_digits }}</p>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit">{{ hours | two_digits }}</p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit">{{ minutes | two_digits }}</p>
<p class="text">Minutes</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
date: {
type: Number
},
},
data() {
return {
now: Math.trunc((new Date()).getTime() / 1000)
}
},
mounted() {
window.setInterval(() => {
this.now = Math.trunc((new Date()).getTime() / 1000);
},1000);
},
computed: {
seconds() {
return (this.modifiedDate - this.now) % 60;
},
minutes() {
return Math.trunc((this.modifiedDate - this.now) / 60) % 60;
},
hours() {
return Math.trunc((this.modifiedDate - this.now) / 60 / 60) % 24;
},
days() {
return Math.trunc((this.modifiedDate - this.now) / 60 / 60 / 24);
},
modifiedDate: function() {
return Math.trunc(Date.parse(this.date) / 1000)
}
},
}
</script>
从“./Grid”导入网格;
从“Vue”导入Vue;
从“./倒计时”导入倒计时;
导出默认值{
组成部分:{
倒计时
},
道具:{
网格:{
类型:字符串,
}
}
}
Vue.filter('两位数字',函数(值){
if(value.toString().length{
this.now=Math.trunc((new Date()).getTime()/1000);
},1000);
},
计算:{
秒(){
返回(this.modifiedDate-this.now)%60;
},
会议记录(){
返回Math.trunc((this.modifiedDate-this.now)/60)%60;
},
小时数{
返回Math.trunc((this.modifiedDate-this.now)/60/60)%24;
},
天(){
返回Math.trunc((this.modifiedDate-this.now)/60/60/24);
},
modifiedDate:函数(){
返回Math.trunc(Date.parse(this.Date)/1000)
}
},
}
我写了一个演示,你需要吗
Timer.vue
<template>
<div class="timer">
<div class="title-block">
<slot>
<!--slot-->
</slot>
</div>
<div class="column">
<div class="block">
<p class="digit">{{ days }}</p>
<p class="text">Days</p>
</div>
<div class="block">
<p class="digit">{{ hours }}</p>
<p class="text">Hours</p>
</div>
<div class="block">
<p class="digit">{{ minutes }}</p>
<p class="text">Minutes</p>
</div>
<div class="block">
<p class="digit">{{ seconds }}</p>
<p class="text">Seconds</p>
</div>
</div>
</div>
</template>
<style>
.timer{
background-color: #42b983;
padding: 20px;
margin: 20px;
}
.title-block{
border: solid 1px #f2f2f2;
}
.title{
font-size: 18px;
font-weight: 700;
}
.timer .column .block{
display: inline-block;
margin: 0 10px;
background-color: #FFF;
padding: 10px;
}
</style>
<script>
export default {
props: {
date: {
type: String
}
},
data () {
return {
now: 0,
count: 0
}
},
methods: {
loop () {
this.count++
this.now = Math.trunc(new Date().getTime() / 1000)
console.log(this.now)
console.log(this.count)
this.count < 200 && setTimeout(this.loop, 1000)
}
},
mounted () {
this.loop()
},
computed: {
seconds () {
return (this.modifiedDate - this.now) % 60
},
minutes () {
return Math.trunc((this.modifiedDate - this.now) / 60) % 60
},
hours () {
return Math.trunc((this.modifiedDate - this.now) / 60 / 60) % 24
},
days () {
return Math.trunc((this.modifiedDate - this.now) / 60 / 60 / 24)
},
modifiedDate: function () {
return Math.trunc(Date.parse(this.date) / 1000)
}
}
}
</script>
{{days}
天
{{hours}
小时数
{{minutes}
分钟
{{seconds}
秒
.计时器{
背景色:#42b983;
填充:20px;
利润率:20px;
}
.标题栏{
边框:实心1px#f2f2;
}
.头衔{
字号:18px;
字号:700;
}
.timer.column.block{
显示:内联块;
利润率:0.10px;
背景色:#FFF;
填充:10px;
}
导出默认值{
道具:{
日期:{
类型:字符串
}
},
数据(){
返回{
现在:0,,
计数:0
}
},
方法:{
循环(){
这个,伯爵++
this.now=Math.trunc(new Date().getTime()/1000)
console.log(this.now)
console.log(this.count)
this.count<200&&setTimeout(this.loop,1000)
}
},
挂载(){
this.loop()
},
计算:{
秒(){
返回(this.modifiedDate-this.now)%60
},
分钟(){
返回Math.trunc((this.modifiedDate-this.now)/60)%60
},
小时(){
返回Math.trunc((this.modifiedDate-this.now)/60/60)%24
},
天(){
返回Math.trunc((this.modifiedDate-this.now)/60/60/24)
},
modifiedDate:函数(){
返回Math.trunc(Date.parse(this.Date)/1000)
}
}
}
倒计时.vue
<template>
<div id="slideshow">
<Timer :date="date">
<p class="title">KNHB</p>
<p class="description">Sprint 1</p>
</Timer>
<Timer :date="date">
<p class="title">MG de Jong</p>
<p class="description">Sprint 2</p>
</Timer>
<Timer :date="date">
<p class="title">ITIP</p>
<p class="description">Sprint 3</p>
</Timer>
</div>
</template>
<style>
.timer{
background-color: #42b983;
padding: 20px;
margin: 20px;
}
.title-block{
border: solid 1px #f2f2f2;
}
.title{
font-size: 18px;
font-weight: 700;
}
.timer .column .block{
display: inline-block;
margin: 0 10px;
background-color: #FFF;
padding: 10px;
}
</style>
<script>
import Timer from './Timer'
export default {
components: {
Timer
},
props: {
date: {
type: String
}
},
data () {
return {
now: Math.trunc((new Date()).getTime() / 1000)
}
},
mounted () {
window.setInterval(() => {
this.now = Math.trunc((new Date()).getTime() / 1000)
}, 1000)
},
computed: {
seconds () {
return (this.modifiedDate - this.now) % 60
},
minutes () {
return Math.trunc((this.modifiedDate - this.now) / 60) % 60
},
hours () {
return Math.trunc((this.modifiedDate - this.now) / 60 / 60) % 24
},
days () {
return Math.trunc((this.modifiedDate - this.now) / 60 / 60 / 24)
},
modifiedDate: function () {
return Math.trunc(Date.parse(this.date) / 1000)
}
}
}
</script>
KNHB
Sprint 1
MG德容
Sprint 2
ITIP
Sprint 3
.计时器{
背景色:#42b983;
填充:20px;
利润率:20px;
}
.标题栏{
边框:实心1px#f2f2;
}
.头衔{
字号:18px;
字号:700;
}
.timer.column.block{
显示:内联块;
利润率:0.10px;
背景色:#FFF;
填充:10px;
}
从“./Timer”导入计时器
导出默认值{
组成部分:{
计时器
},
道具:{
日期:{
类型:字符串
}
},
数据(){
返回{
现在:Math.trunc((new Date()).getTime()/1000)
}
},
挂载(){
window.setInterval(()=>{
this.now=Math.trunc((新日期()).getTime()/1000)
}, 1000)
},
计算:{
秒(){
返回(this.modifiedDate-this.now)%60
},
分钟(){
返回Math.trunc((this.modifiedDate-this.now)/60)%60
},
小时(){
返回Math.trunc((this.modifiedDate-this.now)/60/60)%24
},
天(){
返回Math.trunc((this.modifiedDate-this.now)/60/60/24)
},
modifiedDate:函数(){
返回Math.trunc(Date.parse(this.Date)/1000)
}
}
}
App.vue
<template>
<div id="app">
<CountDown date="2017-03-20 12:00"></CountDown>
</div>
</template>
<script>
import CountDown from './components/CountDown'
export default {
name: 'app',
components: {
CountDown
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
从“./components/CountDown”导入倒计时
导出默认值{
名称:“应用程序”,
组成部分:{
倒计时
}
}
#应用程序{
字体系列:“Avenir”、Helvetica、Arial、无衬线字体;
-webkit字体平滑:抗锯齿;
-moz osx字体平滑:灰度;
文本对齐:居中;
颜色:#2c3e50;
边缘顶部:60像素;
}
你不能将日期作为道具传递,而不是硬编码吗?这就是我正在做的,或者不是。不,它在项目倒计时中硬编码,在倒计时中支持。猜测一下你需要(在项目中)一个道具和一个v形绑定到倒计时的道具。我该怎么做?因为我的倒计时中已经有了一个道具。虽然这个链接可以回答这个问题,但最好在这里包含答案的基本部分,并提供链接供参考。如果链接页面更改,只有链接的答案可能会无效。-我添加了主要部件