Vue3 v-bind 如何进行响应式绑定标签属性label

Question

Vue3 v-bind 如何进行响应式绑定label属性，图2的{{timeStr.huor}}可直接使用，但绑定label="newHour"时显示newHour，无法动态显示时间（让图片1中的13:00即将开抢，响应式绑定label="newHour"，且newHour即为当前小时+1）
使页面中的 label 显示 newHour 中的变量（ newHour即为当前小时+1，再拼接'即将开抢'）

目的：动态绑定label的值，求帮忙解答，非常感谢！

Answer 1

引自免费微信小程序：皆我百晓生

在 Vue3 中，你可以使用 ref 和 computed 来实现你想要的功能。首先，你需要创建一个 ref 来存储当前时间，并且定义一个 computed 属性来计算新小时（当前小时 + 1）。然后，将这个 computed 属性绑定到标签上。以下是修改后的代码示例：

<!-- template -->
<div class="Zx-title">
  <span>当前 开抢中</span>
  <span>{{ formattedTime }}</span>
</div>
<div class="Snapped">
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="当前 开抢中" name="first">User</el-tab-pane>
    <el-tab-pane label="New Hour" name="second">{{ newHour }}</el-tab-pane>
  </el-tabs>
</div>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import dayjs from 'dayjs';

const activeName = ref('first');
const handleClick = (tab: any, event: Event) => {
  console.log(tab, event);
};

// 存储当前时间的 ref
const currentTime = ref(dayjs());

// 计算新小时的 computed 属性
const newHour = computed(() => {
  const now = dayjs(currentTime.value);
  return now.add(1, 'hour').format('HH:00');
});

// 格式化的时间字符串
const formattedTime = computed(() => {
  return `${currentTime.value.format('HH:mm')}即将开抢`;
});

// 在组件挂载后初始化并设置定时器
onMounted(() => {
  setInterval(() => {
    currentTime.value = dayjs();
  }, 1000);
});
</script>

在这个例子中，我们首先导入了 ref, computed, 和 onMounted 从 vue 模块。然后，我们在模板中展示了 formattedTime 和 newHour 的值。

在脚本部分，我们定义了一个 currentTime ref 来存储当前时间，并定义了一个 newHour computed 属性来计算新小时。同时，我们也定义了一个 formattedTime computed 属性来格式化显示的时间字符串。

通过 onMounted 生命周期钩子函数，我们在组件加载完成后设置了一个每秒更新当前时间的定时器。

这样，当页面渲染时，newHour 和 formattedTime 都会根据 currentTime 自动更新，实现了你所要求的动态绑定效果。