为什么我的功能不能为我的时钟增加时间，工作呢？
为什么我的功能不能为我的时钟增加时间，工作呢？
提问于 2022-10-08 16:20:26
我正在学习Vue.JS，在我的第一个项目中，我尝试使用复合API制作一个数字时钟，我遇到的问题是，这个函数似乎不会为我的时钟增加时间。
这是我的代码：
<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>我也尝试过用onMounted代替onBeforeMount，但是这也没有帮助，你能帮我理解为什么它不起作用吗？
回答 4
Stack Overflow用户
发布于 2022-10-08 17:02:44
您需要更新时间：
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>
Stack Overflow用户
发布于 2022-10-08 17:20:42
不需要clock作为参考，因为这个值在模板中没有变化。另一方面，time应该是一个参考，因为它是每秒钟更新一次。
在间隔时间内，应使用当前日期进行更新。为此，您需要再次调用new Date()以获取实际日期，否则您将从一秒钟前获取日期，并使用该旧日期更新时间。
不需要onMounted钩子，因为您只更改了一个变量。
您的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,
};
},这里是四处游玩的一个工作示例
Stack Overflow用户
发布于 2022-10-09 07:14:13
只要有时间参考
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73998624
复制相关文章
相似问题
腾讯云开发者
