[英]Why isn't my function to add time to my clock, working?
I am learning Vue.JS and for my first project I am trying to make a digital clock using Composition API, the problem I ran into is, that it seems the function won't add time for my clock.我正在学习 Vue.JS,对于我的第一个项目,我正在尝试使用组合 API 制作数字时钟,我遇到的问题是,function 似乎不会为我的时钟增加时间。
Here is my code:这是我的代码:
<template>
<div class="clock">
<div class="time">
<span>{{time}}</span>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
name: 'App',
setup(){
let clock = ref(new Date())
let time = clock.value.toLocaleTimeString('lv-LV')
const showLocalTime = function(){
setInterval(
time,1000)
};
onMounted(() => {
showLocalTime()
})
return{
time
}
}
}
</script>
I have also tried replacing onMounted
with onBeforeMount
but that didn't help either, could you help me understand why it isn't working?我也尝试用
onMounted
替换onBeforeMount
但这也没有帮助,你能帮我理解为什么它不起作用吗?
You need to update time:您需要更新时间:
const { ref, onBeforeUnmount } = Vue const app = Vue.createApp({ setup(){ const time = ref((new Date()).toLocaleTimeString('lv-LV')) const updateCurrentTime = () => { time.value = (new Date()).toLocaleTimeString('lv-LV') } const updateTimeInterval = setInterval(updateCurrentTime, 1000) onBeforeUnmount(() => clearInterval(updateTimeInterval)) return { time } } }) app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div class="clock"> <div class="time"> <span>{{ time }}</span> </div> </div> </div>
There is no need for clock
to be a ref since this value is not changing in the template. clock
不需要作为 ref,因为这个值在模板中没有改变。 On the other hand time
should be a ref since this is being updated every second.另一方面,
time
应该是一个参考,因为它每秒更新一次。
On the interval you should update with the current Date.在您应该更新当前日期的时间间隔内。 For that you need to call
new Date()
again in order to get the actual date otherwise you are getting the date from a second ago and updating the time with that old date.为此,您需要再次调用
new Date()
以获得实际日期,否则您将获得一秒钟前的日期并使用该旧日期更新时间。
The onMounted
hook is not needed since you're changing only a variable. onMounted
挂钩,因为您只更改一个变量。
Your setup()
could look like this:您的
setup()
可能如下所示:
setup() {
let now = new Date();
const time = ref(now.toLocaleTimeString("lv-LV"));
setInterval(() => {
now = new Date();
time.value = now.toLocaleTimeString("lv-LV");
}, 1000);
return {
time,
};
},
Here a working example to play around这是一个可以玩的工作示例
just make time ref只是让时间参考
<template>
<div class="clock">
<div class="time">
<span>{{ time }}</span>
</div>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
let time = ref(new Date().toLocaleTimeString('lv-LV'))
setInterval(() => time.value = new Date().toLocaleTimeString('lv-LV'), 1000)
return { time }
}
}
</script>
<template>
<div class="clock">
<div class="time">
<h2>clock</h2>
<span>{{ clock }}</span>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
name: 'App',
setup() {
let clock = ref()
let time = () => {
clock.value = new Date().toLocaleTimeString('lv-LV')
}
time()
const showLocalTime = function () {
setInterval(
() => {
time()
}, 1000)
};
onMounted(() => {
showLocalTime()
})
return {
clock
}
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.