列表渲染指令

過濾

v-for的使用

遍歷數(shù)組和對象

遍歷數(shù)組：

<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中的迭代數(shù)組的方法，只是這個需要用key來綁定index已確定index唯一 其中，in可以使用of替代

迭代對象

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

運行結(jié)果：

迭代整數(shù)

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

vue數(shù)組的更新

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

非變異方法：

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

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

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

對列表進行操作

methods:{deleteBook(index){//Vue中的splice（）是一個重寫方法，實現(xiàn)了以下兩個功能//1.調(diào)用原生數(shù)組中的對應(yīng)方法//2.更新界面this.books.splice(index,1)},updataBook(index,newBook){//vue會監(jiān)聽導(dǎo)數(shù)據(jù)變化，但是不會更新視圖//this.books[index] = newBook this.books.splice(index, 1, newBook)},addBook(newBook){this.books.push(newBook)}}<button @click="addBook({name:'ReactJs', price:45})">添加一條數(shù)據(jù)</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.通過過濾函數(shù)filterArr函數(shù)過濾掉已經(jīng)被包含的數(shù)組，并返回這個新數(shù)組 3.迭代新的數(shù)組，并輸出

關(guān)鍵代碼如下：

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

列表排序

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。