vue watch 方法學習及應用

2021-08-16 19:45:34 字數 3530 閱讀 8824

最近做了個**調查問卷,使用vue將問卷資料(model層,即data裡的資料)渲染至

view裡面,使用者在頁面上操作使得view改變,view層通過viewmodel將資料同步至model,反過來model層資料改變通過viewmoel渲染資料至view(我所理解的mvvm),相比jqery傳統dom操作,這種資料量較大的操作使用vue較為方便。

上個禮拜五畫完頁面+基本邏輯梳理,感冒原因,邏輯梳理沒有寫完。

說正題,如何監聽view上使用者對整體資料的操作

部分資料以及頁面樣式如下:

插播一條關於雙向資料繫結 v-model的特寫

v-model只能繫結固定位置資料,不能動態繫結data底層某單獨定義的資料,(上周五bug了一下午悟出的)

在動態繫結v-model報錯的時候跟小夥伴**過用this指標指向v-model繫結元素,確實不報錯了,不過也沒能將資料成功繫結,後分析之所以不報錯也無繫結數值是因為this指標指向data底層資料,而底層資料未定義

v-model所繫結的資料,所以既不報錯也未能成功繫結。

以上資料層subdata中為每道題(radio || checked)使用者選擇後繫結的資料,想要知道使用者選了哪些選項,哪些沒選,自然而然的想到了vue的方法 watch。

之前只是了解過,並未使用過,本次是第一次使用。算是使用心得吧!

dom/html **如下

<

input

type

="radio"

name

="***"

value

="女"id=

"check"

v-model

="***"

checked

="checked"

/>

<

input

type

="radio"

name

="***"

value

="男"id=

"checkt"

v-model

="***"

/>

<

input

type

="radio"

name="

smoke

"value

="吸菸"id=

"smoke

"v-model="

databox

"checked

="checked"

/>

<

input

type

="radio"

name="

smoke

"value

="不吸菸"id=

"smoke

t"v-model="

databox

"/>

<

input

type

="radio"

name="

drink

"value

="飲酒"id=

"drink

"v-model

="databox.

drink

"checked

="checked"

/>

<

input

type

="radio"

name="

drink

"value

="不飲酒"id=

"drink

t"v-model

="databox.

drink

"/>

js**如下

varexample

= new

vue(

***:

'女',

},watch: ,

databox: ,

deep:

true

, //物件內部的屬性監聽,也叫深度監聽

},"databox.drink"

:'a'

, // //繫結的資料為單一的字串  用法      繫結的資料為單一的字串  用法

},methods: ,

},});

example.

$watch

("***"

,function

(curval

,oldval

) ) //主動呼叫$watch方法來進行資料監測

最後**下watch (觀察) 與  計算 (computed)的區別  

・watch方法每次只能監聽乙個data值的變化

・而計算屬性可以同時監聽多個data值的變化

・用計算屬性可以簡化watch中重複的**

如文中所示

watch: ,

databox: ,

deep:

true

, //物件內部的屬性監聽,也叫深度監聽

},"databox.drink"

:'a'

, // //繫結的資料為單一的字串  用法      繫結的資料為單一的字串  用法

},computed:,

},其中example.amount 不是乙個定值 會隨著 example.***和example.databox.drink 的改變而改變

*   ┃-jsl- ┃ + 神獸保佑

*   ┃   ┃ **無bug  

*   ┃   ┃  +         

*   ┃    ┗━━━┓ + +

*   ┃        ┣┓mr.j~~~~~~~

*   ┃        ┏┛

*   ┗┓┓┏━┳┓┏┛ + + + +

*    ┃┫┫ ┃┫┫

*    ┗┻┛ ┗┻┛+ + + +

*/

swift方法學習

1.例項方法 2.型別方法 型別方法和oc中的類方法相似 結構體和列舉能夠定義方法是swift與oc c的主要區別之一。在oc中,類是唯一能定義方法的型別。但在swift中,你不僅能選擇是否要定義乙個類 結構體 列舉,還能靈活的在你建立的型別 類 結構體 列舉 上定義方法。例項方法 例項方法的語法和...

NIO ByteBuffer方法學習

建立heapbytebuffer例項,大小為1024位元組 bytebuffer heapbytebuffer bytebuffer.allocate 1024 建立directbytebuffer例項,大小為1024位元組 這裡的bytebuffer是directbytebuffer,不是heap...

改進方法學習

根據人工蜂群演算法的機制我們可以看出,演算法的初始化對演算法的影響較大,初始化的蜜源如果在解空間中分布的不夠均勻,覆蓋解空間的範圍小,將會限制演算法在解空間中的搜尋範圍,導致對解空間中的一些區域搜尋不到,影響演算法的全域性搜尋能力。初始化中若蜜源分布過近會影響演算法的效能。如圖所示 發生如上圖所示的...