動態(tài)添加+動態(tài)綁定（vue數(shù)據(jù)驅(qū)動思路）

canopus4u 發(fā)布于2019-08-23 12:22 / 2522人閱讀

摘要：更進一步把所有設(shè)置滿分值的先進行綁定，然后控制顯示跟隱藏，這樣一來目的達到了，但是一旦選項是從后臺獲取的話，后臺一旦改動，這邊就要跟著更改。說明定義滿分值循環(huán)的數(shù)組說明此數(shù)組為上面的數(shù)據(jù)說明循環(huán)詳細的寫法

先上案例

首先來分析一下，勾選科目的時候，下面同時增加科目的滿分值設(shè)置。

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

充分利用數(shù)據(jù)驅(qū)動視圖思想：

代碼片段

1.說明:此函數(shù)作用，判斷數(shù)組里面是否包含函數(shù)傳入的值，這邊使用遍歷方法對數(shù)組進行循環(huán)，看數(shù)組里的對象的subject的值是不是跟傳入的相等，如果相等就說明數(shù)組里面包含這項了，也就是說明了這個科目已經(jīng)是勾選的狀態(tài)了，也就要把他刪除掉，這邊刪除使用splic方法（vue的變異方法），直接改變原數(shù)組的值，并處發(fā)vue對視圖更新。

2.說明：定義滿分值循環(huán)的數(shù)組

3、說明：此數(shù)組為上面CheckBox的數(shù)據(jù)

4、說明：v-for循環(huán)詳細的寫法

云服務(wù)器 GPU云服務(wù)器動態(tài)添加顯示數(shù)據(jù) js動態(tài)添加數(shù)據(jù) jsp動態(tài)添加數(shù)據(jù) js動態(tài)綁定數(shù)據(jù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98397.html

相關(guān)文章

動態(tài)添加+動態(tài)綁定（vue數(shù)據(jù)驅(qū)動思路）

摘要：更進一步把所有設(shè)置滿分值的先進行綁定，然后控制顯示跟隱藏，這樣一來目的達到了，但是一旦選項是從后臺獲取的話，后臺一旦改動，這邊就要跟著更改。說明定義滿分值循環(huán)的數(shù)組說明此數(shù)組為上面的數(shù)據(jù)說明循環(huán)詳細的寫法先上案例showImg(https://segmentfault.com/img/bVbieMK?w=864&h=154); 首先來分析一下，勾選科目的時候，下面同時增加科目的滿分值...

_ang 2019-08-29 17:00 評論0 收藏0
動態(tài)添加+動態(tài)綁定（vue數(shù)據(jù)驅(qū)動思路）

摘要：更進一步把所有設(shè)置滿分值的先進行綁定，然后控制顯示跟隱藏，這樣一來目的達到了，但是一旦選項是從后臺獲取的話，后臺一旦改動，這邊就要跟著更改。說明定義滿分值循環(huán)的數(shù)組說明此數(shù)組為上面的數(shù)據(jù)說明循環(huán)詳細的寫法先上案例showImg(https://segmentfault.com/img/bVbieMK?w=864&h=154); 首先來分析一下，勾選科目的時候，下面同時增加科目的滿分值...

ad6623 2019-08-02 11:44 評論0 收藏0
VUE

摘要：注意指令前面需要加，對指令傳遞數(shù)據(jù)賦值使用例如約定速成加上，表示自定義指令不要使用駝峰式命名。需要通過方法實現(xiàn)自定義指令注冊完成。 vue Vue.js 構(gòu)建數(shù)據(jù)驅(qū)動的web界面庫。集中實現(xiàn)MVVM 的 VM層。容易與其他庫或項目整合通過盡可能簡單的API實現(xiàn)相應(yīng)的數(shù)據(jù)綁定和組合的視圖組件核心：相應(yīng)的數(shù)據(jù)綁定系統(tǒng)，數(shù)據(jù)與DOM保持同步數(shù)據(jù)驅(qū)動的視圖，普通的HTML模板中使用特殊的語...

bergwhite 2019-08-19 18:39 評論0 收藏0
vue總結(jié)系列--數(shù)據(jù)驅(qū)動和響應(yīng)式

摘要：由于是需要兼容的后臺系統(tǒng)，該項目并不能使用到等技術(shù)，因此我在上的經(jīng)驗大都是使用原生的編寫的，可以看見一個組件分為兩部分視圖部分，和數(shù)據(jù)部分。在公司里幫項目組里開發(fā)后臺系統(tǒng)的前端項目也有一段時間了。 vue這種數(shù)據(jù)驅(qū)動，組件化的框架和react很像，從一開始的快速上手基本的開發(fā)，到后來開始自定義組件，對element UI的組件二次封裝以滿足項目需求，期間也是踩了不少坑。由于將來很長一...

AbnerMing 2019-08-22 18:26 評論0 收藏0
你應(yīng)該要知道的Vue.js

摘要：具體步驟實現(xiàn)將需要的數(shù)據(jù)對象進行遞歸遍歷，包括子屬性對象的屬性，都加上和。綜上，在性能上的收益并不是最主要的，更重要的是它使得具備了現(xiàn)代框架應(yīng)有的高級特性。原文：你應(yīng)該要知道的Vue.js 組件data為什么必須是函數(shù)？因為組件可能被多處使用，但他們的data是私有的，所以每個組件都要return一個新的data對象組件通信父子組件通信：$on、$emit 非父子組件的通信...

張春雷 2019-08-22 15:37 評論0 收藏0