好的，我們來講解如何在 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從安裝到部署)
” —— 一次子集化踩坑與完整排查清單)
