資訊專欄INFORMATION COLUMN
摘要：但不能檢測對象屬性的添加或刪除，即如果操作對象數(shù)據(jù)變化，視圖是不會(huì)隨著對象數(shù)據(jù)變化而變化的。但是，可以使用方法向嵌套對象添加響應(yīng)式屬性。
通過數(shù)組的變異方法我們可以讓視圖隨著數(shù)據(jù)變化而變化。但Vue 不能檢測對象屬性的添加或刪除，即如果操作對象數(shù)據(jù)變化，視圖是不會(huì)隨著對象數(shù)據(jù)變化而變化的。使用Vue.set()可以幫助我們解決這個(gè)問題。
需求：可多選的列表：
tag: [
{ name: "馬化騰" },
{ name: "馬云" },
{ name: "劉強(qiáng)東" },
{ name: "李彥宏" },
{ name: "比爾蓋茨" },
{ name: "扎克伯格" }
],
template&CSS：
.choice-tag-check{ border: 1px solid #2d8cf0 !important; color: #2d8cf0 !important; }//夢想通過判斷每個(gè)item的checked的布爾值來決定選中或未選中
- {{item.name}}
一開始的想法是將靜態(tài)數(shù)據(jù)（或網(wǎng)絡(luò)請求的數(shù)據(jù)）添加一個(gè)新的字段，通過修改checked為true或false來判斷選中狀態(tài)。
mounted() {
for(let i = 0 ; i
console.log(this.tag)一下
都添加上了，感覺一切順利，有點(diǎn)美滋滋。
選擇方法methods：
//選擇標(biāo)簽
choiceTagFn(index) {
if(this.tag[index].checked === false){
this.tag[index].checked = true
}else{
this.tag[index].checked = false
}
},
隨便選兩個(gè)，然后再console.log(this.tag)一下
數(shù)據(jù)層tag的checked值已經(jīng)發(fā)生改變，然鵝~~~
視圖層是一動(dòng)不動(dòng)，說好的響應(yīng)式呢？
查閱文檔后找到了原因：由于 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除
那怎么辦？官方的說法是：對于已經(jīng)創(chuàng)建的實(shí)例，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對象添加響應(yīng)式屬性。
今天的主角就是：Vue.set()
Vue.set( object, key, value )
object：需要更改的數(shù)據(jù)(對象或者數(shù)組)
key：需要更改的數(shù)據(jù)
value ：重新賦的值
更改后的代碼
我們不再使用for來給對象添加字段，而是使用一個(gè)新的數(shù)組來展示選中與未選中狀態(tài)
新的數(shù)據(jù)：
tag: [
{ name: "馬化騰" },
{ name: "馬云" },
{ name: "劉強(qiáng)東" },
{ name: "李彥宏" },
{ name: "比爾蓋茨" },
{ name: "扎克伯格" }
],
//是否選中
tagCheck:[false,false,false,false,false,false],
我們就不再直接操作數(shù)據(jù)，而是操作新的數(shù)組
新的template&CSS：
-
{{item.name}}
新的選擇方法methods：
我們可以使用this.$set來代替Vue.set
//選擇標(biāo)簽
choiceTagFn(index) {
if(this.tagCheck[index] === false){
//(更改源，更改源的索引，更改后的值)
this.$set( this.tagCheck, index, true )
}else{
//(更改源，更改源的索引，更改后的值)
this.$set( this.tagCheck, index, false )
}
},
就大功告成啦實(shí)現(xiàn)了列表多選，視圖會(huì)根據(jù)數(shù)據(jù)（數(shù)組，對象）的變化而變化。
如果有錯(cuò)誤或者更簡單的方法，歡迎大力指出~~~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108163.html
摘要：效率不高，很多多余，稱之為臟檢查。通過索引設(shè)置數(shù)組元素并觸發(fā)視圖更新。解決閃爍問題自定義指令自定義指令提供一種機(jī)制將數(shù)據(jù)的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫。 Vue通過簡單 API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng) 輕量 數(shù)據(jù)綁定 指令 插件化 架構(gòu)從傳統(tǒng)后臺(tái)MVC 向REST API + 前端MV*遷移DOM是數(shù)據(jù)的一種自然映...
摘要：在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題知識(shí)點(diǎn)，對一些知識(shí)點(diǎn)進(jìn)行更加深入的描述?？梢栽谠撱^子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過程。改變中的狀態(tài)的唯一途徑就是顯式地提交。這兩個(gè)可以在不進(jìn)行刷新的情況下，操作瀏覽器的歷史紀(jì)錄。 在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題/知識(shí)點(diǎn)，對一些知識(shí)點(diǎn)進(jìn)行更加深入的描述。 一、對于MVVM的理解？ MVVM 是 Model-View-Vie...
摘要：添加事件偵聽器時(shí)使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。差別在哪里將特性名轉(zhuǎn)換為從開始支持語法糖，會(huì)擴(kuò)展成一個(gè)更新父組件綁定值的偵聽器。如果需要條件渲染多個(gè)元素，可以使用包裹。 1.前言 安裝 直接用 引入（本地或者cdn） npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...
摘要：總結(jié)最后我們依照下圖參考深入淺出，再來回顧下整個(gè)過程在后，會(huì)調(diào)用函數(shù)進(jìn)行初始化，也就是過程，在這個(gè)過程通過轉(zhuǎn)換成了的形式，來對數(shù)據(jù)追蹤變化，當(dāng)被設(shè)置的對象被讀取的時(shí)候會(huì)執(zhí)行函數(shù)，而在當(dāng)被賦值的時(shí)候會(huì)執(zhí)行函數(shù)。 前言 Vue 最獨(dú)特的特性之一，是其非侵入性的響應(yīng)式系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對象。而當(dāng)你修改它們時(shí)，視圖會(huì)進(jìn)行更新。這使得狀態(tài)管理非常簡單直接，不過理解...
摘要：注意指令前面需要加，對指令傳遞數(shù)據(jù)賦值使用例如約定速成加上，表示自定義指令不要使用駝峰式命名。需要通過方法實(shí)現(xiàn)自定義指令注冊完成。 vue Vue.js 構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的web界面庫。集中實(shí)現(xiàn)MVVM 的 VM層。容易與其他庫或項(xiàng)目整合 通過盡可能簡單的API實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)綁定和組合的視圖組件核心：相應(yīng)的數(shù)據(jù)綁定系統(tǒng)， 數(shù)據(jù)與DOM保持同步數(shù)據(jù)驅(qū)動(dòng)的視圖，普通的HTML模板中使用特殊的語...
閱讀 667·2023-04-25 15:49
閱讀 3120·2021-09-22 15:13
閱讀 1258·2021-09-07 10:13
閱讀 3480·2019-08-29 18:34
閱讀 2562·2019-08-29 15:22
閱讀 512·2019-08-27 10:52
閱讀 689·2019-08-26 18:27
閱讀 3023·2019-08-26 13:44
