在Vue 3中，如何使用ref和computed實現多個輸入框內容的同步輸入？

如何在 vue 3 中實現多個輸入框的同步輸入？

在構建 Vue 3 應用時，常常需要實現多個輸入框內容的實時同步。例如，一個地址表單，希望省、市、區輸入框的內容自動合并到一個總地址框中。本文將介紹如何利用 Vue 3 的 ref 和 computed 屬性高效實現這一功能。

首先，使用 ref 創建響應式變量存儲每個輸入框的值，然后用 computed 計算合并后的地址。

以下代碼示例演示了這一過程：

立即學習“前端免費學習筆記（深入）”；

import { ref, computed } from 'vue';  // 使用 ref 創建響應式變量，分別存儲省、市、區的值 const province = ref(''); const city = ref(''); const district = ref('');  // 使用 computed 計算合并后的地址 const address = computed(() => [province.value, city.value, district.value].join(' '));

代碼中，province、city 和 district 分別對應省、市、區輸入框的值。 當這些值發生變化時，computed 屬性會自動重新計算 address 的值，從而實現輸入框內容的實時同步。 join(‘ ‘) 方法將省市區的值用空格連接成完整的地址字符串。