Vue和餓了麼UI 實現動態表單效果

2022-06-27 16:51:15 字數 720 閱讀 9821

對於動態增減表單項,element ui 官方文件表單那一節已經介紹得很清楚了,我之前沒有看見,繞了很多彎路,這裡針對點選按鈕增刪一排輸入框的問題做乙個總結。

效果圖如下

存在一排必填的姓名與手機號,點選增加後會新增一行,點選每行後面的刪除圖示則會刪除該行

必填項很簡單,就是普通表單:

增加

export default ,

formrules: ],

phone: [

,$/, message: '目前只支援中國大陸的手機號碼' }]}

}}}

動態表單部分:

在data 的 form 裡增加 dynamicitem

form:
在methods裡增加方法

methods: )

},deleteitem (item, index)

}

每次點選增加按鈕,會在dynamicitem裡增加新的項,反映到頁面上就是新增了一排輸入框;而點選刪除的時候,則通過index找到當前行刪掉。

Vue 實戰 餓了麼 (一)

一 mount 手動掛載 當vue例項沒有el屬性時,則該例項尚沒有掛載到某個dom中 假如需要延遲掛載,可以在之後手動呼叫vm.mount 方法來掛載。new vue render function x 二 mock資料 如果後端介面尚未開發完成,前端開發一般使用mock資料。注意 新版的vue ...

vue的餓了麼寫作感受

1.在重複使用的元件中,要把重複使用元件的需要在資料的請求的地方設定為在富元件中,通過props船隻到子元件,這樣在重複呼叫次元件的時候既可以很好的避免元件的值的衝突 2.getdata的使用,把所有的axios請求都在getdata中使用,然後在請求的action中進行引入然後進行資料的處理 mu...

vue實現餓了麼外賣系統(完整開發流程)

1.掌握vue.js專案在實戰中的用 2.學會使用vue.js 3.元件化 模組化的開發方式 1.vue cli 2.axiox ajax通訊 vue resource 更新後不支援 推薦axios 3.webpack構建工具 4.mock.ls模擬資料 5.es6 eslint 風格工具 看個人需...