v-for
-
預期：
Array | Object | number | string | Iterable (2.6 新增) -
用法：
基於源數據多次渲染元素或模板塊。此指令之值，必須使用特定語法
alias in expression，為當前遍歷的元素提供別名：<div v-for="item in items"> {{ item.text }} </div>另外也可以為數組索引指定別名 (或者用於對象的鍵)：
<div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, name, index) in object"></div> - 響應式方法
-
push() ：在數組后面插入元素
-
unshift() 在數組前面插入元素
-
shift() 刪除數組前面第一個元素
-
pop() 刪除數組最后面第一個元素
-
splice()作用：刪除元素、插入元素、替換元素 //第一個參數為開始元素位置 //刪除元素，第二個參數傳入刪除元素的個數（如果沒有傳，就是刪除后面所有元素） // this.letters.splice(1,2) //插入元素，第二個參數為0，后面參數為插入元素的值 // this.letters.splice(1,0,'ff','dd') //替換元素，第二個參數為替換元素的個數，后面參數為替換元素的值,要與替換個數相同的元素 // this.letters.splice(1,2,'ff','dd')
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-for遍歷數組，對象與響應式方法</title> </head> <body> <div id="app"> <ul> <!-- 遍歷數組，或遍歷數組及其下標index--> <li v-for="item in list">{{item}}</li> <li v-for="(item,index) in list">{{index}}-{{item}}</li> <!-- 遍歷對象，或遍歷鍵值對(value,key) ，還可以加上下標index--> <li v-for="item in info">{{item}}</li> <li v-for="(value,key) in info">{{key}}： {{value}}</li> <li v-for="(value,key,index) in info">{{index}}--{{key}}： {{value}}</li> <!-- key 標識item，item得保障唯一性，為了更高效的dom,例如加入數組一個元素，不綁定key時， 插入元素后面的元素會后移，如鏈，綁定key后，就在中間加入元素，其他元素不變，如鍵值對一樣（不是鍵值對）--> <li v-for="item in list" :key="item">{{item}}</li> </ul> <ul> <li v-for="item in letters">{{item}}</li> </ul> <button @click = "butClick">響應按鈕</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', list: ['語文','數學','英語'], letters: ['a','b','c','d'], info: { name: 'wu', age: 18, height: 188, } }, methods: { sub: function () { }, butClick(){ // //push() 在數組后面插入元素 // this.letters.push('ee'), // this.letters.push('ee','ff','dd') // //unshift() 在數組前面插入元素 // this.letters.unshift('gg') // this.letters.unshift('gg','hh','ii') // //shift() 刪除數組前面第一個元素 // this.letters.shift() // //pop() 刪除數組最后面第一個元素 // this.letters.pop() //splice()作用：刪除元素、插入元素、替換元素 //第一個參數為開始元素位置 //刪除元素，第二個參數傳入刪除元素的個數（如果沒有傳，就是刪除后面所有元素） // this.letters.splice(1,2) //插入元素，第二個參數為0，后面參數為插入元素的值 // this.letters.splice(1,0,'ff','dd') //替換元素，第二個參數為替換元素的個數，后面參數為替換元素的值,要與替換個數相同的元素 // this.letters.splice(1,2,'ff','dd') //替換元素的寫法 //1、 數組的值直接改變（錯誤） // this.letters[0] = 'bbb' // 2、 splice() 方法替換 （正確，一般用） // this.letters.splice //3、 vue自帶的方法 set(對象，索引值，‘修改后的值’) // Vue.set(this.letters,0,'bbb') }, } }) </script> </body> </html>