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

ad6623 發(fā)布于2019-08-02 11:44 / 1509人閱讀

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

先上案例

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

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

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

代碼片段

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

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

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

4、說(shuō)明：v-for循環(huán)詳細(xì)的寫(xiě)法

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

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

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

相關(guān)文章

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

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

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

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

canopus4u 2019-08-23 12:22 評(píng)論0 收藏0
VUE

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

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

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

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

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

張春雷 2019-08-22 15:37 評(píng)論0 收藏0