Vue2.0 v-for filter列表過濾功能的實現(xiàn)
更新時間：2018年09月07日 14:46:52 作者：大灰狼的小綿羊哥哥
今天小編就為大家分享一篇Vue2.0 v-for filter列表過濾功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
使用計算屬性app.js
var app5 = new Vue({
el: '#app5',
data: {
shoppingList: [
"Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
],
key: ""
},
computed: {
filterShoppingList: function () {
// `this` points to the vm instance
var key = this.key;
var shoppingList = this.shoppingList;
return shoppingList.filter(function (item) {
return item.toLowerCase().indexOf(key.toLowerCase()) != -1
});;
}
}
})
app.html
<div id="app5">
<h2>Vue-for</h2>
<ul>
<li v-for="item in shoppingList">
{{ item }}
</li>
</ul>
<h2>Vue-for filter實現(xiàn)</h2>
<ul>
Filter Key<input type="text" v-model="key">
<li v-for="item in filterShoppingList">
{{ item }}
</li>
</ul>
</div>
最終效果實現(xiàn)了根據(jù)關(guān)鍵字來過濾列表的功能。
以上這篇Vue2.0 v-for filter列表過濾功能的實現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Echarts是一個與框架無關(guān)的JS圖表庫,但是它基于Js,這樣很多框架都能使用它,下面這篇文章主要給大家介紹了關(guān)于在vue中使用echarts的方法以及可能遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue使得大屏自適應(yīng)的多種方法,自適屏幕，始終保持16:9的比例，還一種是使用CSS scale屬性對大屏幕做自適應(yīng)處理，需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue.js異步上傳文件前后端的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了vue2.0移除或更改的一些東西，vue2.0 移除了index和key，具體內(nèi)容詳情大家參考下本文2017-08-08
本篇文章主要介紹了詳解vuejs幾種不同組件（頁面）間傳值的方式，具有一定的參考價值，有興趣的可以了解一下2017-06-06
今天小編就為大家分享一篇vue.js循環(huán)radio的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在vue項目中,和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,下面這篇文章主要給大家介紹了關(guān)于Vue3引入axios封裝接口的兩種方法,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue中的style樣式如何動態(tài)綁定，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3中使用VueParticles實現(xiàn)粒子動態(tài)背景效果
為了提高頁面展示效果，特別類似于登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡單的實現(xiàn)頁面的粒子背景效果，本文給大家分享vue粒子動態(tài)背景效果實現(xiàn)代碼，需要的朋友參考下吧2022-05-05
vue+layui實現(xiàn)select動態(tài)加載后臺數(shù)據(jù)的例子
今天小編就為大家分享一篇vue+layui實現(xiàn)select動態(tài)加載后臺數(shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09