當(dāng)今世界，大多數(shù)人都有許多地址，比如家庭地址、工作地址等等。為了方便用戶管理地址，我們可以按照用戶需求制作一個展示地址列表的頁面，再添加一個點(diǎn)擊新增地址的功能，這樣用戶可以輕松添加多個地址。 在這里我們將采用Vue框架開發(fā)該頁面，使用Vue的組件化開發(fā)，將整個頁面拆分成多個組件，代碼結(jié)構(gòu)會更加清晰。下面我們來一一介紹這些組件。
//地址列表組件
Vue.component('address-list', {
props: ['addresses'], //通過屬性傳遞地址數(shù)據(jù)
template: `- {{ address }}
`
})
//新增地址組件
Vue.component('add-address', {
template: ``,
data() {
return {
formVisible: false, //控制表單顯示
newAddress: '' //存儲新增地址
}
},
methods: {
showForm() {
this.formVisible = true
},
addAddress() {
if (this.newAddress.trim() !== '') {
this.$emit('add', this.newAddress.trim()) //將新增地址通過事件傳遞給父組件
this.formVisible = false
this.newAddress = ''
}
}
}
})我們先介紹地址列表組件，該組件接收一個名為address的屬性，通過v-for循環(huán)展示地址列表。接下來是新增地址組件，該組件內(nèi)含一個button與一個表單，點(diǎn)擊button顯示表單，提交表單會觸發(fā)addAddress方法，將輸入的地址數(shù)據(jù)傳遞到父組件。 現(xiàn)在我們來看一下整個頁面的實(shí)現(xiàn)，如下所示。
在頁面中我們將地址列表組件和新增地址組件進(jìn)行了分離。在Vue實(shí)例中定義了地址數(shù)據(jù)addresses和addAddress方法，當(dāng)新增地址組件中觸發(fā)提交事件時，會調(diào)用addAddress方法將新增的地址添加到addresses列表中，通過Vue的響應(yīng)式更新地址列表組件的數(shù)據(jù)，從而實(shí)現(xiàn)頁面的更新。
new Vue({
el: '#app',
data: {
addresses: [
'123 Main St',
'456 Oak Dr',
'789 Elm Ave'
]
},
methods: {
addAddress(newAddress) {
this.addresses.push(newAddress)
}
}
})至此，我們已經(jīng)完成了點(diǎn)擊新增地址的功能，給用戶帶來了更好的使用體驗(yàn)。在實(shí)際開發(fā)中，我們還可以根據(jù)實(shí)際需求對新增地址組件進(jìn)行樣式、驗(yàn)證、聯(lián)想等等的進(jìn)一步增強(qiáng)，為用戶提供更豐富的功能和用戶體驗(yàn)。