亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

使用Vue.set完成視圖隨著對(duì)象修改動(dòng)態(tài)變化（列表多選）

TerryCai / 1757人閱讀

摘要：但不能檢測(cè)對(duì)象屬性的添加或刪除，即如果操作對(duì)象數(shù)據(jù)變化，視圖是不會(huì)隨著對(duì)象數(shù)據(jù)變化而變化的。但是，可以使用方法向嵌套對(duì)象添加響應(yīng)式屬性。

通過(guò)數(shù)組的變異方法我們可以讓視圖隨著數(shù)據(jù)變化而變化。但Vue 不能檢測(cè)對(duì)象屬性的添加或刪除，即如果操作對(duì)象數(shù)據(jù)變化，視圖是不會(huì)隨著對(duì)象數(shù)據(jù)變化而變化的。使用Vue.set()可以幫助我們解決這個(gè)問(wèn)題。

需求：

可多選的列表：

初始代碼： 準(zhǔn)備好的數(shù)據(jù)： 
 tag: [
        { name: "馬化騰" },
        { name: "馬云" },
        { name: "劉強(qiáng)東" },
        { name: "李彥宏" },
        { name: "比爾蓋茨" },
        { name: "扎克伯格" }
      ],
template&CSS： 

  
    
      //夢(mèng)想通過(guò)判斷每個(gè)item的checked的布爾值來(lái)決定選中或未選中
    
  • 
      {{item.name}}
    
    • 
  




.choice-tag-check{
  border: 1px solid #2d8cf0 !important;
  color: #2d8cf0 !important;
}

一開(kāi)始的想法是將靜態(tài)數(shù)據(jù)（或網(wǎng)絡(luò)請(qǐng)求的數(shù)據(jù)）添加一個(gè)新的字段，通過(guò)修改checked為true或false來(lái)判斷選中狀態(tài)。

mounted() {
    for(let i = 0 ; i

console.log(this.tag)一下




都添加上了，感覺(jué)一切順利，有點(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)，說(shuō)好的響應(yīng)式呢？


查閱文檔后找到了原因：由于 JavaScript 的限制，Vue 不能檢測(cè)對(duì)象屬性的添加或刪除


那怎么辦？官方的說(shuō)法是：對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性。

今天的主角就是：Vue.set()


Vue.set( object, key, value )


object：需要更改的數(shù)據(jù)(對(duì)象或者數(shù)組)


key：需要更改的數(shù)據(jù)


value ：重新賦的值

更改后的代碼

我們不再使用for來(lái)給對(duì)象添加字段，而是使用一個(gè)新的數(shù)組來(lái)展示選中與未選中狀態(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來(lái)代替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ù)組，對(duì)象）的變化而變化。

如果有錯(cuò)誤或者更簡(jiǎn)單的方法，歡迎大力指出~~~

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

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

相關(guān)文章

  • Vue_Vue權(quán)威指南

    摘要：效率不高，很多多余，稱之為臟檢查。通過(guò)索引設(shè)置數(shù)組元素并觸發(fā)視圖更新。解決閃爍問(wèn)題自定義指令自定義指令提供一種機(jī)制將數(shù)據(jù)的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫(kù)。 Vue通過(guò)簡(jiǎn)單 API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng) 輕量 數(shù)據(jù)綁定 指令 插件化 架構(gòu)從傳統(tǒng)后臺(tái)MVC 向REST API + 前端MV*遷移DOM是數(shù)據(jù)的一種自然映...

    SimonMa 評(píng)論0 收藏0

  • Vue面試中，經(jīng)常會(huì)被問(wèn)到的面試題/知識(shí)點(diǎn)(2019改進(jìn)版)

    摘要：在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題知識(shí)點(diǎn)，對(duì)一些知識(shí)點(diǎn)進(jìn)行更加深入的描述?？梢栽谠撱^子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過(guò)程。改變中的狀態(tài)的唯一途徑就是顯式地提交。這兩個(gè)可以在不進(jìn)行刷新的情況下，操作瀏覽器的歷史紀(jì)錄。 在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題/知識(shí)點(diǎn)，對(duì)一些知識(shí)點(diǎn)進(jìn)行更加深入的描述。 一、對(duì)于MVVM的理解？ MVVM 是 Model-View-Vie...

    singerye 評(píng)論0 收藏0

  • VUE2.0學(xué)習(xí)筆記

    摘要：添加事件偵聽(tīng)器時(shí)使用模式。只當(dāng)事件是從偵聽(tīng)器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。差別在哪里將特性名轉(zhuǎn)換為從開(kāi)始支持語(yǔ)法糖，會(huì)擴(kuò)展成一個(gè)更新父組件綁定值的偵聽(tīng)器。如果需要條件渲染多個(gè)元素，可以使用包裹。 1.前言 安裝 直接用 引入（本地或者cdn） npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...

    pumpkin9 評(píng)論0 收藏0

  • 深入淺出Vue響應(yīng)式原理

    摘要：總結(jié)最后我們依照下圖參考深入淺出，再來(lái)回顧下整個(gè)過(guò)程在后，會(huì)調(diào)用函數(shù)進(jìn)行初始化，也就是過(guò)程，在這個(gè)過(guò)程通過(guò)轉(zhuǎn)換成了的形式，來(lái)對(duì)數(shù)據(jù)追蹤變化，當(dāng)被設(shè)置的對(duì)象被讀取的時(shí)候會(huì)執(zhí)行函數(shù)，而在當(dāng)被賦值的時(shí)候會(huì)執(zhí)行函數(shù)。 前言 Vue 最獨(dú)特的特性之一，是其非侵入性的響應(yīng)式系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對(duì)象。而當(dāng)你修改它們時(shí)，視圖會(huì)進(jìn)行更新。這使得狀態(tài)管理非常簡(jiǎn)單直接，不過(guò)理解...

    yiliang 評(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 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<