列表渲染指令

過濾

v-for的使用

遍歷數組和對象

遍歷數組：

<ul><li v-for ="(book,index) in books":key="index">序號：{{index}},書名:{{book.name}},價格：{{book.price}}</li></ul>new Vue({el:"#app",data:{books:[{name: 'Vue.js', price:50},{name: 'Javascript', price:30},{name: 'Css', price:40},{name: 'Html', price:60}]} 解釋：這個很像python中的迭代數組的方法，只是這個需要用key來綁定index已確定index唯一 其中，in可以使用of替代

迭代對象

<ul><li v-for="(item,key,index) in books[1]":key="index">序號：{{index}}----鍵：{{key}}=>值：{{item}}</li></ul> 內部迭代的意思：選取一個元組進行迭代。其中item，key，index分別代表著 值，屬性，以及序號

運行結果：

迭代整數

用法：<span v-for="n in 10">{{n}} </span>

vue數組的更新

對列表行項目進行增刪查改即是vue對原生方法的重寫和增強，增加了添加了更新視圖的功能

非變異方法：

變異方法與非變異方法區別：編譯方法會改變原始數據，而非變異方法不會修改原始數組但是會得到一個新的數組 vue在檢測數據變化時，并不是直接渲染整個列表，而是最大化的服用dom元素，這導致替換數組中，含有相同元素的項不會被重新渲染。所以可以更新數組替換數組

1)通過索引直接設置的項,如:vm.books[2]={}; 2)修改數組的長度,如:vm.books.length=1;

解決方法參見https://blog.csdn.net/ABAP_Brave/article/details/81714611

對列表進行操作

methods:{deleteBook(index){//Vue中的splice（）是一個重寫方法，實現了以下兩個功能//1.調用原生數組中的對應方法//2.更新界面this.books.splice(index,1)},updataBook(index,newBook){//vue會監聽導數據變化，但是不會更新視圖//this.books[index] = newBook this.books.splice(index, 1, newBook)},addBook(newBook){this.books.push(newBook)}}<button @click="addBook({name:'ReactJs', price:45})">添加一條數據</button><ul><li v-for ="(book,index) in books":key="index">序號：{{index}},書名:{{book.name}},價格：{{book.price}}<button @click="deleteBook(index)"> 刪除</button><button @click="updataBook(index,{name:'AngularJs',price:35})"> 更新</button></li></ul>

列表的過濾和排序

搜索過濾

步驟：

1.通過對話框綁定msgtext 2.通過過濾函數filterArr函數過濾掉已經被包含的數組，并返回這個新數組 3.迭代新的數組，并輸出

關鍵代碼如下：

//實現綁定 <input type="text" v-model="searchText"> //迭代新生成數組元素，即輸出新數組元素 v-for="(book,index) in filterBooks //過濾方法，但是還是不是很清楚 //filterArr=books.filter(p=>p.name.indexOf(searchText)!==-1)這句的語法結構 computed:{filterBooks(){const{searchText,books,orderType}=thislet filterArr=new Array();filterArr=books.filter(p=>p.name.indexOf(searchText)!==-1)return filterArr;}}

列表排序

總結

以上是生活随笔為你收集整理的2，列表渲染指令v-for以及过滤和排序---vue教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。