在Vue.js中如何通過computed屬性實(shí)現(xiàn)多個輸入框內(nèi)容的同步？

vue.JS實(shí)現(xiàn)輸入框內(nèi)容同步：省市區(qū)地址自動合并

在表單設(shè)計中，常常需要多個輸入框內(nèi)容同步，例如省市區(qū)地址的實(shí)時合并。本文將演示如何使用vue.js輕松實(shí)現(xiàn)此功能，提升用戶體驗(yàn)。

下圖展示了目標(biāo)效果：用戶在上方三個輸入框（省、市、區(qū)）輸入內(nèi)容后，下方輸入框自動顯示合并后的完整地址。

我們將利用Vue 3的ref和computed特性實(shí)現(xiàn)。代碼如下：

import { ref, computed } from 'vue';  const province = ref(''); const city = ref(''); const district = ref('');  const address = computed(() => [province.value, city.value, district.value].join(' '));

代碼解釋：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

首先，我們用ref創(chuàng)建三個響應(yīng)式數(shù)據(jù)變量province、city和district，分別對應(yīng)省、市、區(qū)輸入框的值。 輸入框內(nèi)容變化時，這些變量會自動更新。

然后，computed屬性address實(shí)時計算并返回一個字符串，該字符串由province、city和district的值拼接而成，空格分隔。 這個address值將綁定到下方顯示完整地址的輸入框。

通過這種簡潔的方式，我們實(shí)現(xiàn)了省市區(qū)地址的實(shí)時合并，顯著提升了表單的可用性和用戶體驗(yàn)。