Vue
HTML
<div id="app">
<test :ts="ts"></test>
</div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
Vue
Vue.component('test', {
template: `
<div>{{ last() }}</div>
`,
props: {
ts: Number
},
data: () => ({
now: Date.now(),
gg: 0
}),
created() {
setInterval(() => {
this.$forceUpdate();
}, 3000);
},
methods: {
last: function() {
return ~~(-(this.ts - (new Date())) / 1000) + ' секунд';
}
}
})
new Vue({
el: "#app",
data: {
ts: +new Date()
},
created() {
setInterval(() => {
console.warn('change');
this.ts = +new Date();
}, 7000);
},
methods: {
}
})