這篇文章給大家介紹Vue中怎么通過input篩選數據，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都網站設計、成都網站制作、外貿網站建設服務團隊是一支充滿著熱情的團隊，執著、敏銳、追求更好，是創新互聯的標準與要求，同時竭誠為客戶提供服務是我們的理念。創新互聯公司把每個網站當做一個產品來開發，精雕細琢，追求一名工匠心中的細致，我們更用心！

具體內容如下

<div id="app">
 <input v-model='search' />
 <ul>
  <li v-for="item in items">
    <label>價格</label><span v-html="item.name"></span>
    <label>￥</label><span v-html="item.price"></span>
 </ul>
</div>

new Vue({
 el: '#app',
 data: {
  search: '',
  products: [{
   name: '蘋果',
   price: 25
  }, {
   name: '香蕉',
   price: 15
  }, {
   name: '雪梨',
   price: 65
  }, {
   name: '寶馬',
   price: 2500
  }, {
   name: '奔馳',
   price: 10025
  }, {
   name: '柑橘',
   price: 15
  }, {
   name: '奧迪',
   price: 25
  }]
 },
 computed: {
  items: function() {
   var _search = this.search;
   if (_search) {
    return this.products.filter(function(product) {
     return Object.keys(product).some(function(key) {
      return String(product[key]).toLowerCase().indexOf(_search) > -1
     })
    })
   }

   return this.products;
  }
 }
})

關于Vue中怎么通過input篩選數據就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享題目：Vue中怎么通過input篩選數據
本文路徑：http://vcdvsql.cn/article10/gjeddo.html

成都網站建設公司_創新互聯，為您提供建站公司、域名注冊、電子商務、定制開發、軟件開發、網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯