vue分類篩選filter方法簡(jiǎn)單實(shí)例
更新時(shí)間：2021年06月29日 10:07:06 作者：小魚(yú)兒寫(xiě)代碼
這篇文章主要介紹了vue分類篩選filter方法的簡(jiǎn)單實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁(yè)的表格功能
- vuejs實(shí)現(xiàn)本地?cái)?shù)據(jù)的篩選分頁(yè)功能思路詳解
- 基于Vue實(shí)現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)
- vue+elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選高亮
- VUE實(shí)現(xiàn)移動(dòng)端列表篩選功能
- vue商城中商品“篩選器”功能的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)前端列表多條件篩選
- vue+element table表格實(shí)現(xiàn)動(dòng)態(tài)列篩選的示例代碼
- vue3自定義動(dòng)態(tài)不同UI組件篩選框案例
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue+element-ui添加自定義右鍵菜單的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問(wèn)題
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-11-11
這篇文章主要介紹了vue修改Element的el-table樣式的4種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-09-09
Vue?watch監(jiān)聽(tīng)使用的幾種方法
watch是由用戶定義的數(shù)據(jù)監(jiān)聽(tīng)，當(dāng)監(jiān)聽(tīng)的屬性發(fā)生改變就會(huì)觸發(fā)回調(diào)，這項(xiàng)配置在業(yè)務(wù)中是很常用。在面試時(shí)，也是必問(wèn)知識(shí)點(diǎn)，一般會(huì)用作和computed進(jìn)行比較。那么本文就來(lái)帶大家從源碼理解watch的工作流程，以及依賴收集和深度監(jiān)聽(tīng)的實(shí)現(xiàn)2022-12-12
這篇文章主要介紹了讓Vue響應(yīng)Map或Set的變化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue項(xiàng)目實(shí)現(xiàn)一鍵網(wǎng)站換膚效果實(shí)例(webpack-theme-color-replacer的使用)
換皮膚一般都是點(diǎn)擊一個(gè)按鈕彈出一些皮膚的選項(xiàng),選中選項(xiàng)后皮膚生效,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)一鍵網(wǎng)站換膚效果的相關(guān)資料,文中主要介紹的是webpack-theme-color-replacer的使用,需要的朋友可以參考下2023-02-02
本篇文章主要介紹了vue渲染函數(shù)render的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
拿來(lái)就用vue-gird-layout組件封裝示例
這篇文章主要介紹了vue-gird-layout組件封裝示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了Vue使用element-ui實(shí)現(xiàn)菜單導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue 獲取及修改store.js里的公共變量實(shí)例
今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11