好的，我们来讲解如何在 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 和可访问性是最佳实践。
![CICD[导航]、docker+gitlab+harbor+jenkins从安装到部署](http://pic.xiahunao.cn/CICD[导航]、docker+gitlab+harbor+jenkins从安装到部署)
” —— 一次子集化踩坑与完整排查清单)
