最近做了個**調查問卷,使用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...
改進方法學習
根據人工蜂群演算法的機制我們可以看出,演算法的初始化對演算法的影響較大,初始化的蜜源如果在解空間中分布的不夠均勻,覆蓋解空間的範圍小,將會限制演算法在解空間中的搜尋範圍,導致對解空間中的一些區域搜尋不到,影響演算法的全域性搜尋能力。初始化中若蜜源分布過近會影響演算法的效能。如圖所示 發生如上圖所示的...