**
新學習新征程,我們一起踏上學習 vue.js的新長征
遇見 vue.js --------阿文的vue.js學習筆記(1)-----初識vue.js
遇見 vue.js --------阿文的vue.js學習筆記(2—1)----- 基本使用 [1]
遇見 vue.js --------阿文的vue.js學習筆記(2—2)----- 基本使用 [2]
… … …
遇見 vue.js --------阿文的vue.js學習筆記(目錄)
關注我,我們一起學習進步,
**
陣列更新的檢測
當我們的代碼運行成功渲染進了我們的頁面之后,我們的vue也提供了一套方法來對已經渲染的陣列來進行修改(Vue 將被偵聽的陣列的變更方法進行了包裹,所以它們也將會觸發視圖更新,):
| push ( ) | 在后方追加 |
| pop ( ) | 后方減少 |
| shift() | 前面減少 |
| unshift ( ) | 前面追加 |
| splice ( ) | 洗掉 |
| reverse ( ) | 反轉 |
我們可以打開控制臺,然后對例子的 dotos 陣列嘗試呼叫變更方法,比如 example1.dotos.push({ message: ‘Baz’ }),
下面來簡單示例一下上面的 代碼:

首先看這里是一段代碼的執行結果,創建了一個有三項的陣列
1、push () 在后方追加
示例:你可以看到當該陳述句回車執行之后,我們頁面中的陣列馬上被添加了一個新的 資料

2、pop ( ) 洗掉后方的資料
示例:你可以發現當我們在控制臺中輸入該陳述句執行之后,頁面中最后排的資料被直接洗掉了

3、shift() 洗掉前方第一個資料
示例:你可以發現當命令執行之后,我們頁面中被渲染的陣列中的第一個資料被洗掉

4、unshift ( ) 在前方添加資料
示例:你可以發現當我們的命令執行之后,我們頁面中的第一個被渲染了新的資料

5、splice ( ) 洗掉
示例:splice(1,2)是洗掉該 陣列中起始位置為索引1,然后長度為的2 的2個單位

當然,他還可以用來做替換和添加
6、reverse ()反轉
反轉之前的文章有寫過reverse 的例子,可以查閱 遇見 vue.js --------阿文的vue.js學習筆記(4)------模板語法在寫過濾器的時候有寫到過,
物件更新
首先我們先創建一個物件,然后渲染進頁面

1、添加屬性
語法: Vue.set(vm.物件名,“新屬性名”,“屬性”)
示例: 添加一個寵物的屬性

2、洗掉屬性
語法: Vue.delete(vm.物件名,“要刪的屬性名”)
示例: 洗掉一個 name 的屬性

**
關注 校園君有話說 公眾號 ,回復 web前端 免費領取50G 前端學習資料 一份 ,我們一起學習進步吧,

**
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/163553.html
標籤:其他
上一篇:Js創建物件的幾種方法
下一篇:html進階:1、【Meta 標簽的 http-equiv 屬性使用指南】content-Type(顯示字符集的設定)、Refresh(重繪)2、用 iframe 解決跨域請求問題
