好的，我们来讲解如何在 Vue 模板中调用函数。您提供的代码是一个非常棒的、很实用的例子。

在 Vue 模板中，你可以在两个主要地方调用函数：

文本插值中：像 {{ formatDate(date) }} 这样，函数的返回值会作为文本被渲染到页面上。
v-bind 指令（或其简写 :）中：像 :title="toTitleDate(date)" 这样，函数的返回值会成为对应 HTML attribute 的值。

核心要点

定义位置：所有想在模板中调用的函数，都必须在 setup() 函数内部定义，然后作为返回对象的一个属性暴露给模板。
响应式调用：每当函数所依赖的数据（例如传入的参数 date）发生变化时，Vue 的响应式系统会重新调用这个函数，并更新视图。这确保了页面显示总是最新的。
保持简洁：虽然可以在模板中调用函数，但如果一个函数逻辑复杂或计算开销大，更推荐使用计算属性 (computed)。计算属性会缓存其结果，只有在依赖变化时才重新计算，性能更好。

示例代码

下面是一个完整的、可运行的 HTML 文件，它实现了您提供的代码片段 <time :title="toTitleDate(date)" :datetime="date"> {{ formatDate(date) }}</time> 的功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 - 在模板中调用函数</title><style>body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;display: grid;place-content: center;min-height: 100vh;text-align: center;font-size: 1.5rem;}time {padding: 10px 20px;background-color: #f0f0f0;border: 1px solid #ccc;border-radius: 8px;cursor: help;}</style>
</head>
<body><div id="app"><p>将鼠标悬停在下面的日期上查看 title 属性：</p><time :title="toTitleDate(post.published)" :datetime="post.published">{{ formatDate(post.published) }}</time>
</div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script>const { createApp, reactive } = Vue;const app = createApp({setup() {// 1. 定义需要在模板中使用的数据const post = reactive({title: '初识 Vue 3',// 使用 ISO 8601 标准格式的日期字符串published: '2025-07-02T12:30:00Z' });// 2. 定义第一个函数，用于格式化显示给用户的日期const formatDate = (dateString) => {if (!dateString) return '';const date = new Date(dateString);// 返回 "YYYY年M月D日" 格式return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;};// 3. 定义第二个函数，用于生成更详细的 title 属性const toTitleDate = (dateString) => {if (!dateString) return '';const date = new Date(dateString);// 返回完整的本地化日期时间字符串return date.toLocaleString();};// 4. 将数据和函数一起返回，以便模板可以访问它们return {post,formatDate,toTitleDate};}});app.mount('#app');
</script></body>
</html>

代码解释

数据 (post)：我们在 setup 中定义了一个包含日期字符串 published 的响应式对象 post。
函数 (formatDate, toTitleDate)：我们定义了两个函数，它们都接收一个日期字符串作为参数，并各自返回不同格式的字符串。
返回: setup 函数最后返回一个对象，这个对象里包含了 post 数据和 formatDate、toTitleDate 这两个函数。这是关键一步，只有返回了，模板才能找到并调用它们。
模板调用:
- {{ formatDate(post.published) }}：调用 formatDate 函数，并将 post.published 作为参数传入。函数的返回值 2025年7月2日 会被显示在页面上。
- :title="toTitleDate(post.published)"：调用 toTitleDate 函数，其返回值（一个更详细的日期，如 2025/7/2 05:30:00）被绑定到 <time> 元素的 title 属性上。当用户鼠标悬停时，浏览器会显示这个 title。
- :datetime="post.published"：这里直接将原始的、机器可读的 ISO 格式日期绑定到 datetime 属性上，这对于 SEO 和可访问性是最佳实践。