首頁 > web前端 > css教學 > 主體

vue資料動態新增與動態綁定思路(圖文)

不言
發布: 2018-10-17 15:31:33
轉載
3719 人瀏覽過

這篇文章帶給大家的內容是關於vue資料動態添加和動態綁定思路(圖文),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

先上案例

vue資料動態新增與動態綁定思路(圖文)

先來分析一下,勾選科目的時候,下面同時增加科目的滿分數設定。

以前寫jquery的思路:當勾選的時候創建dom節點,然後把dom節點append到父節點上,項目採用前後分離的方式進行交互,這樣一來,所設置的科目滿分值就脫離綁定了。更進一步:把所有設定滿分值的input先進行綁定,然後控制顯示跟隱藏,這樣一來目的達到了,但是一旦選項是從後台獲取的話,後台一旦改動,這邊就要跟著更改。

充分利用資料驅動視圖想法:

vue資料動態新增與動態綁定思路(圖文)

#程式碼片段

1.說明:此函數作用,判斷數組裡面是否包含函數傳入的值,這邊使用遍歷方法對數組進行循環,看數組裡的物件的subject的值是不是跟傳入的相等,如果相等就表示數組裡麵包含這項了,也就是說明了這個科目已經是勾選的狀態了,也就要把他刪除掉,這邊刪除使用splic方法(vue的變異方法),直接改變原數組的值,並處發vue對視圖更新。

vue資料動態新增與動態綁定思路(圖文)

2.說明:定義滿分值迴圈的陣列

vue資料動態新增與動態綁定思路(圖文)

3、說明:此陣列為上面CheckBox的資料

vue資料動態新增與動態綁定思路(圖文)

#4、說明:v-for迴圈詳細的寫法

vue資料動態新增與動態綁定思路(圖文)

以上是vue資料動態新增與動態綁定思路(圖文)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板