vue數組操作不更新視圖問題

vue 觀察數組的變異方法 更新視圖

push()

pop()

shift()

unshift()

splice(i,n,arr)

sort(xx)

reverse()

ex: app.book.push({

  name:'css',

  author:'lee'

})

有些方法不會改變數組

filter()

concat()

slice()

返回新數組? 需要用 新返回的數組 更新原數組

app.books= app.books.filter(functiion(item){

? ? ?return item.name.match(/javascript/)

})

vue 不能檢測到數組變化 不能觸發視圖更新:

1 通過直接搜影 更改變量?

? ? ex app.book[3] = 'xxxx';

2 修改數組的長度

? app.books.length =1;

解決這個問題 倆種方法

1 vue 內置的set方法 類 splice

  Vue.set(app.books,3,{

    name:'qqq',

    author:'qjb'

  })

2 webpack 沒有引入Vue 用 $set

?this.$set(app.books,3,{

  name:'css',

  author:'qjb'

})

this指向組建的實例 既 app ,可以使用app.$set()

3? 使用 splice

?appp.book.splice(3,1,{

  name:'css',

  author:'qjb'

})

splice(索引,刪除的數量(0不刪除),插入的變量arr1,arr2,arr3)

更改索引

?app.books.splice(1);

?

、、、、過濾與排序。。。。。。。

不改變原數組?

?computed:{

  filterBooks:function(){

    return this.books.filter(function(book){

      return book.name.match(/javascript/)

    })

  }

}

sort()來排序

?

、、、、、、、、、、、、、、、、、、、、、、

?

轉載于:https://www.cnblogs.com/dabingqi/p/9180628.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/251568.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/251568.shtml
英文地址,請注明出處:http://en.pswp.cn/news/251568.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

java中如何計算兩個時間段的月份差

直接計算,先取得兩個日期的年份和月份,月份差(第二年份-第一年份)*12 第二月份-第一月份轉載于:https://www.cnblogs.com/pretty-guy/p/3284593.html

Node --- Promise中的多異步協作

當我們需要處理多個異步調用時,應該如何處理呢? //首先假設有2個讀取文件的異步調用,promise1和promise2 var promise1 readFile ("foo.txt", "utf-8"); var promise2 readFile ("bar.txt", "uft-8");//然后,我們可以使用all()方法…

Software-OO 面向對象思維

2017-11-06 11:02:50 所有編程語言的最終目的都是提供一種“抽象”方法。 解決問題的復雜程度直接取決于抽象的種類及質量。這兒的“種類”是指準備對什么進行“抽象”? 匯編是對基礎機器的少量抽象。“命令式”語言是對匯編語言的一種抽象。 (Alan Kay …

Go Python 7: 2-Layer Neural Network

轉載于:https://www.cnblogs.com/wordchao/p/9182511.html

LiveWriter測試

test livewriter 轉載于:https://www.cnblogs.com/wujun/archive/2006/11/21/567052.html

第三次實驗報告

項目一 項目分析 本項目目的就是考察我們調用searching類和sorting類中的方法,通過提交測試用例設計情況(正常,異常,邊界,正序,逆序)確保類的可行性 代碼截圖 排序截圖 運行截圖 項目二 代碼截…

Node --- 構建一個HTTP服務

代碼如下: var http require(http); http.createServer(function (req, res){res.writeHead(200,{Content-Type: text/plain});res.end(Hello World\n); }).listen(1337, 127.0.0.1); console.log(Server running at http://127.0.0.1:1337);運行如下: 詳情見《深…

python中#!/usr/bin/python與#!/usr/bin/env python的區別

目的是在運行python腳本的時候告訴操作系統我們要用python解釋器去運行py腳本 所以我們在第一句往往會寫如下兩句中的其中一句: #!/usr/bin/python或 >#!/usr/bin/env python 就是說在沒有在執行程序時指出用什么程序運行py腳本時,系統會去調用python程序來執行。…

頁面級緩存@ OutputCache

最近要用到緩存,所以才去找了相關資料,開始在一個用戶控件頭加入 OutputCache指令,發現第一次進入頁面是對了,第二次再進入時就出錯了。郁悶……這里 OutputCache的一些參數說明: 以聲明的方式控制 ASP.NET 頁或頁中包含的用戶控件…

$.ajax的一些坑啊

1.如果發送ajax返回的數據為json務必設置其 Content-Type:application/json;charsetUTF-8不然會導致其success:function(data)中的data返回的為字符串,導致后面的文本解析失敗 轉載于:https://www.cnblogs.com/lonecloud/p/7794670.html

JavaScript --- 解析Cookie

var parseCookie function(cookie){var cookies {};if(!cookie){return cookies;}var list cookie.split(;);for (var i0;i<list.length;i){var pair list[i].split();cookies[pair[0].trim()] pair[1];}return cookies; };

DDR3和eMMC區別

DDR3內存條和eMMC存儲器區別&#xff1a; 1. 存儲性質不同&#xff1b;2. 存儲容量不同&#xff1b;3. 運行速度不同&#xff1b;4. 用途不同。 具體區別如下&#xff1a; 1、存儲性質不同&#xff1a;eMMC是非易失性存儲器&#xff0c;不論在通電或斷電狀態下&#xff0c;數據…

Sql Server臨時表中插入標示列

select ROW_NUMBER() over( order by sort_id asc) as rows,* into #tmp_tb from tb_district 其中sort_id為您原表的排序列。 tb_district為要操作的表。 轉載于:https://www.cnblogs.com/daretodream/archive/2013/04/03/2997800.html

17秋 軟件工程 團隊第五次作業 Alpha Scrum3

17秋 軟件工程 團隊第五次作業 Alpha Scrum3 今日完成的任務 杰麟&#xff1a;java后端學習&#xff1b;世強&#xff1a;Android的部門基礎信息模塊的信息顯示和對接后臺&#xff1b;港晨&#xff1a;后臺管理登陸界面ui設計&#xff1b;樹民&#xff1a;超級管理員Web后端數據…

Node --- Basic認證

Basic認證: 當客戶端與服務器端進行請求時,允許通過用戶名和密碼實現的一種身份認證方式. // 如果一個頁面需要Basic認證,它會檢查請求報文頭中的Authorization字段的內容,該字段的值由認證方式和加密值構成: $ curl -v "http://user:passwww.baidu.com/" > GET …

用列表+for循環生成乘法口訣表

1 # 結合一下列表生成&#xff0c; 準備設計乘法表2 # numlist [1,2,3,4,5]3 # [pow(i,3) for i in numlist]4 # ## [1, 8, 27, 64, 125]5 # [[pow(i,2), pow(i,3), pow(i,4) ] for i in numlist]6 # ## [[1, 1, 1], [4, 8, 16], [9, 27, 81], [16, 64, 256], [25, 125, 625]]…

event.target【轉載】

[轉載] 1.this和event.target的區別&#xff1a; js中事件是會冒泡的&#xff0c;所以this是可以變化的&#xff0c;但event.target不會變化&#xff0c;它永遠是直接接受事件的目標DOM元素&#xff1b; 2.this和event.target都是dom對象&#xff0c;如果要使用jquey中的方法可…

node --- http數據上傳

// 通過報頭的Transfer-Encoding或Content-Length即可判斷請求中是否帶有內容 var hasBody function(req) {return transfer-encoding in req.headers || content-length in req.headers; };// 在HTTP_Parser解析報頭結束后,報文內容部分會通過data事件觸發 function (req, re…

MVC是架構模式,而不是設計模式

最早學編程的時候看過一些書&#xff0c;印象深刻的一本書《設計模式解析》&#xff0c;那本書給我后來的工作提供了很大的幫助。 他叫我站在問題模型的立場上指定解決方法&#xff0c;也教會了我軟件設計中每個問題都可以細化到到不可再分割的原子性。 在那書以后看到過一些設…

msp430入門編程42

msp430中C語言的軟件工程--事件觸發程序結構 轉載于:https://www.cnblogs.com/guochaoxxl/p/7812773.html