vue分類篩選filter方法簡單實(shí)例
本文實(shí)例為大家分享了vue分類篩選filter方法的具體代碼,供大家參考,具體內(nèi)容如下
<html> <head> <meta charset="utf-8"> <title>filter</title> </head> <body> <div id="app"> <ul> <li v-for="item in filterlist">{{item}}</li> </ul> <div @click="agg">加載更多</div> </div> <script src="../js/vue.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { size:5, list:[ {"id":0,"title":"11111","cont":"111111"}, {"id":1,"title":"22222","cont":"111111"}, {"id":2,"title":"33333","cont":"111111"}, {"id":3,"title":"44444","cont":"111111"}, {"id":4,"title":"55555","cont":"55555"}, {"id":5,"title":"66666","cont":"66666"}, {"id":6,"title":"77777","cont":"77777"}, {"id":7,"title":"77777","cont":"88888"}, {"id":8,"title":"888888","cont":"999999"}, {"id":9,"title":"000000","cont":"99999"}, {"id":10,"title":"a88888","cont":"99999"}, {"id":11,"title":"a22222","cont":"111111"}, {"id":12,"title":"a33333","cont":"111111"}, {"id":13,"title":"a44444","cont":"111111"}, {"id":14,"title":"a55555","cont":"55555"}, {"id":15,"title":"a66666","cont":"66666"}, {"id":16,"title":"a77777","cont":"77777"}, {"id":17,"title":"a77777","cont":"88888"}, {"id":18,"title":"a888888","cont":"999999"}, {"id":19,"title":"a000000","cont":"99999"}, {"id":20,"title":"a88888","cont":"99999"} ] }, computed: { filterlist: function () { var num=this.size; return this.list.filter(function (number) { return number.id < num }) } }, methods:{ agg:function(){ this.size+=5; } } }); </script> </body> </html>
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》,歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁的表格功能
- vuejs實(shí)現(xiàn)本地?cái)?shù)據(jù)的篩選分頁功能思路詳解
- 基于Vue實(shí)現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)
- vue+elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選高亮
- VUE實(shí)現(xiàn)移動端列表篩選功能
- vue商城中商品“篩選器”功能的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)前端列表多條件篩選
- vue+element table表格實(shí)現(xiàn)動態(tài)列篩選的示例代碼
- vue3自定義動態(tài)不同UI組件篩選框案例
相關(guān)文章
vue使用transition組件動畫效果的實(shí)例代碼
這篇文章主要介紹了vue使用transition組件動畫效果的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別
這篇文章主要介紹了vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,需要的小伙伴可以參考一下2022-07-07Vue使用xlsx和xlsx-style導(dǎo)出表格出現(xiàn)部分樣式缺失的問題解決
這篇文章主要為大家詳細(xì)介紹一下Vue使用xlsx-style導(dǎo)出excel時(shí)樣式的設(shè)置,以及出現(xiàn)添加背景色,合并單元格部分樣式缺失問題的解決,需要的可以參考下2024-01-01利用VUE框架,實(shí)現(xiàn)列表分頁功能示例代碼
本篇文章主要介紹了利用VUE框架,實(shí)現(xiàn)列表分頁功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-01-01基于Vue3+UniApp在單個(gè)頁面實(shí)現(xiàn)固定TabBar的多種方式
tabBar 是移動端應(yīng)用常見的頁面效果,用于實(shí)現(xiàn)多頁面的快速切換,本文給大家介紹了如何基于Vue3+UniApp在單個(gè)頁面實(shí)現(xiàn)固定TabBar的多種方式,需要的朋友可以參考下2025-03-03Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼
菜單管理是一個(gè)對菜單樹結(jié)構(gòu)的增刪改查操作,這篇文章主要介紹了Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼,需要的朋友可以參考下2022-02-02vue antd的from表單中驗(yàn)證rules中type的坑記錄
這篇文章主要介紹了vue antd的from表單中驗(yàn)證rules中type的坑記錄,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04Vue?中的?computed?和?watch?的區(qū)別詳解
這篇文章主要介紹了Vue中的computed和watch的區(qū)別詳解,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09