vue資料動態新增與動態綁定思路（圖文）

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

先上案例

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

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

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

#程式碼片段

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

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

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

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

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