写一段倒计时的前端vue代码

以下是一个简单的倒计时的前端 Vue 代码：

<template>
  <div>
    <h1>距离结束还有{{ countDown }}秒</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countDown: 60, // 倒计时的秒数
    };
  },
  mounted() {
    setInterval(() => {
      if (this.countDown > 0) {
        this.countDown--;
      }
    }, 1000); // 每秒执行一次倒计时函数
  },
};
</script>

在这个代码中，我们首先在 Vue 的模板中使用了插值绑定语法将 `countDown` 数据绑定到了页面中。在 Vue 的组件中，数据可以使用 `data` 函数进行初始化，这里我们将 `countDown` 初始化为了 `60` 秒。在 `mounted` 生命周期钩子函数中，我们使用了 `setInterval` 方法来每秒执行一次倒计时函数，将 `countDown` 数据减少 1 秒。当 `countDown` 的值为 0 时，倒计时结束。