當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue005_ 列表渲染

發布時間：2024/2/28 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue005_ 列表渲染小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? 列表渲染

列表顯示指令

數組: v-for / index
對象: v-for / key

2) 列表的更新顯示

刪除 item
替換 item

3) 列表的高級處理

列表過濾
列表排序

代碼示例：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><h2>測試：v-for 遍歷數組</h2><ul><li v-for="(p, index) in persons" :key = "index">{{index}}--{{p.name}}--{{p.age}}--<button @click="deleteItem(index)">刪除</button>--<button @click="updateItem(index,{name:'tom',age:15})">更新</button></li></ul><h2>測試： v-for 遍歷數組</h2><ul><li v-for="(value, key) in persons[0]">{{ key }} : {{ value }}</li></ul></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({el: '#demo',data: {persons:[{id: 1,name: 'George',age: 22},{id: 2,name: 'Honey',age: 20},{id: 3,name: 'GeorgeDage',age: 20}]},methods:{deleteItem(index) {//splice//The elements to add to the array. If you don't specify any elements, //splice simply removes elements from the array. this.persons.splice(index,1)},updateItem(index,p){// this.persons[index] = p //頁面不會更新this.persons.splice(index,1,p)}}})</script></body> </html>

結果展示

代碼示例：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><input type="text" name="searchName" placeholder="搜索指定用戶名" v-model="searchName"/><ul><li v-for="(p, index) in filterPerson" :key='index'>{{index}}--{{p.name}}--{{p.age}}</li></ul><button @click="setOrderType(1)">年齡升序</button><button @click="setOrderType(2)">年齡降序</button><button @click="setOrderType(0)">原本順序</button></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({el: '#demo',data: {orderType: 0,searchName: '',persons: [{id: 1,name: 'GeorgeDage',age: '22'},{id: 4,name: 'George',age: '28'},{id: 5,name: 'Tom',age: '18'},{id: 2,name: 'Jack',age: '24'},{id: 3,name: 'Cat',age: '26'},{id: 4,name: 'Mike',age: '13'},{id: 4,name: 'Mocina',age: '30'}]},methods: {setOrderType(orderType){this.orderType = orderType}},computed: {filterPerson() {let {orderType,searchName,persons} = this//過濾persons = persons.filter(p => p.name.indexOf(searchName) != -1)//排序if(orderType !== 0){persons = persons.sort(function(p1, p2){if (orderType === 1) {return p1.age-p2.age} else{return p2.age-p1.age} })}return persons}}})</script></body> </html>

?結果展示

總結

以上是生活随笔為你收集整理的Vue005_ 列表渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

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

列表