如何在Vue 3中使用computed屬性實(shí)現(xiàn)多個(gè)輸入框的同步輸入？

巧用vue 3 computed屬性，實(shí)現(xiàn)表單輸入框同步

在表單設(shè)計(jì)中，常常需要實(shí)現(xiàn)多個(gè)輸入框內(nèi)容同步更新的功能，例如地址信息聯(lián)動(dòng)填寫。本文將演示如何在Vue 3中利用computed屬性優(yōu)雅地解決此問(wèn)題。

假設(shè)我們有一個(gè)表單，包含省份、城市和區(qū)縣三個(gè)輸入框，希望用戶在任意一個(gè)輸入框輸入后，另一個(gè)輸入框能實(shí)時(shí)同步顯示相同內(nèi)容。

首先，使用ref定義三個(gè)響應(yīng)式數(shù)據(jù)變量：

import { ref, computed } from 'vue';  const province = ref(''); const city = ref(''); const district = ref('');

然后，利用computed屬性創(chuàng)建一個(gè)計(jì)算屬性address，它將省份、城市和區(qū)縣的值拼接成完整的地址字符串：

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

const address = computed(() => [province.value, city.value, district.value].join(' '));

這樣，當(dāng)用戶修改任意一個(gè)輸入框的值時(shí)，computed屬性會(huì)自動(dòng)重新計(jì)算address的值，從而實(shí)現(xiàn)多個(gè)輸入框的同步更新。 這種方法簡(jiǎn)潔高效，提升了用戶體驗(yàn)和開(kāi)發(fā)效率。