快捷導(dǎo)航

Vue通過input篩選數(shù)據(jù)

更新時(shí)間：2020年10月26日 13:26:13 作者：薛偉杰

這篇文章主要為大家詳細(xì)介紹了Vue通過input篩選數(shù)據(jù)的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue通過input篩選數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下

<div id="app">
 <input v-model='search' />
 <ul>
 <li v-for="item in items">
  <label>價(jià)格</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;
 }
 }
})

關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請閱讀專題《vue實(shí)戰(zhàn)教程》

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue-electron中修改表格內(nèi)容并修改樣式
本文主要介紹了vue-electron中修改表格內(nèi)容并修改樣式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例
本篇文章主要介紹了vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
詳解vue父子組件間傳值(props)
本篇文章主要介紹了詳解vue父子組件間傳值(props)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
vue如何動態(tài)設(shè)置背景漸變色
這篇文章主要介紹了vue如何動態(tài)設(shè)置背景漸變色問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue keep-alive實(shí)踐總結(jié)（推薦）
本篇文章主要介紹了Vue keep-alive實(shí)踐總結(jié)（推薦），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能詳解
這篇文章主要給大家介紹了關(guān)于VUE如何利用vue-print-nb實(shí)現(xiàn)打印功能的相關(guān)資料,文中還給大家介紹了vue-print-nb使用中的常見問題，如空白頁,需要的朋友可以參考下
2022-04-04
vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路詳解
這篇文章主要給大家介紹了關(guān)于vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-02-02
Vue中動畫與過渡的使用教程
最近在寫vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過渡的效果,雖然vue動畫不是強(qiáng)項(xiàng),庫也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過渡動畫效果的相關(guān)資料,需要的朋友可以參考下
2023-01-01
vue - vue.config.js中devServer配置方式
今天小編就為大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Vue3中關(guān)于ref和reactive的問題
這篇文章主要介紹了Vue3中關(guān)于ref和reactive的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04