快捷導(dǎo)航

Vue2.0 v-for filter列表過濾功能的實(shí)現(xiàn)

更新時(shí)間：2018年09月07日 14:46:52 作者：大灰狼的小綿羊哥哥

今天小編就為大家分享一篇Vue2.0 v-for filter列表過濾功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

使用計(jì)算屬性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實(shí)現(xiàn)</h2>
  <ul>
   Filter Key<input type="text" v-model="key"> 
   <li v-for="item in filterShoppingList">
    {{ item }}
   </li>
  </ul>  
 </div>

最終效果實(shí)現(xiàn)了根據(jù)關(guān)鍵字來過濾列表的功能。

以上這篇Vue2.0 v-for filter列表過濾功能的實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

在vue中使用echarts的方法以及可能遇到的問題
Echarts是一個(gè)與框架無關(guān)的JS圖表庫,但是它基于Js,這樣很多框架都能使用它,下面這篇文章主要給大家介紹了關(guān)于在vue中使用echarts的方法以及可能遇到的問題的相關(guān)資料,需要的朋友可以參考下
2022-09-09
Vue使得大屏自適應(yīng)的多種方法
這篇文章主要介紹了Vue使得大屏自適應(yīng)的多種方法,自適屏幕，始終保持16:9的比例，還一種是使用CSS scale屬性對(duì)大屏幕做自適應(yīng)處理，需要的朋友可以參考下
2023-10-10
vue.js異步上傳文件前后端實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了vue.js異步上傳文件前后端的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
vue2.0移除或更改的一些東西(移除index key)
這篇文章主要介紹了vue2.0移除或更改的一些東西，vue2.0 移除了index和key，具體內(nèi)容詳情大家參考下本文
2017-08-08
詳解vuejs幾種不同組件（頁面）間傳值的方式
本篇文章主要介紹了詳解vuejs幾種不同組件（頁面）間傳值的方式，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-06-06
vue.js循環(huán)radio的實(shí)例
今天小編就為大家分享一篇vue.js循環(huán)radio的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue二次封裝axios流程詳解
在vue項(xiàng)目中,和后臺(tái)交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,下面這篇文章主要給大家介紹了關(guān)于Vue3引入axios封裝接口的兩種方法,需要的朋友可以參考下
2022-10-10
vue中的style樣式如何動(dòng)態(tài)綁定
這篇文章主要介紹了vue中的style樣式如何動(dòng)態(tài)綁定，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue3中使用VueParticles實(shí)現(xiàn)粒子動(dòng)態(tài)背景效果
為了提高頁面展示效果，特別類似于登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡(jiǎn)單的實(shí)現(xiàn)頁面的粒子背景效果，本文給大家分享vue粒子動(dòng)態(tài)背景效果實(shí)現(xiàn)代碼，需要的朋友參考下吧
2022-05-05
vue+layui實(shí)現(xiàn)select動(dòng)態(tài)加載后臺(tái)數(shù)據(jù)的例子
今天小編就為大家分享一篇vue+layui實(shí)現(xiàn)select動(dòng)態(tài)加載后臺(tái)數(shù)據(jù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09