如何在 vue3 模板中显示函数内部的变量

Answer 1

只需使用Vue的反应性

用

ref()

定义你的变量

const days = ref(0);

并使用

.value

在您的函数中设置它们：

days.value = Math.floor(timeleft / (1000 * 60 * 60 * 24));

这里是游乐场

const { createApp, ref } = Vue;

const countDownDate = new Date("Apr 28, 2023 16:37:52").getTime();

const App = {
  setup() {    

    const days = ref(0);
    const hours = ref(0);
    const minutes = ref(0);
    const seconds = ref(0);

    const myfunc = setInterval(function() {
      const now = new Date().getTime();
      var timeleft = countDownDate - now;

      days.value = Math.floor(timeleft / (1000 * 60 * 60 * 24));
      hours.value = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      minutes.value = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
      seconds.value = Math.floor((timeleft % (1000 * 60)) / 1000);
      
    }, 1000)
  
    return { days, hours, minutes, seconds }
  }
  
}
const app = createApp(App);
app.mount('#app');

#app { line-height: 1.5; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
  <b>Countdown:</b><br/>
  <p>  Days {{ days }}, Hours {{ hours }}, Minutes: {{  minutes }}, Seconds: {{ seconds }} </p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

---

<script setup>

版本这里.