欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)搜索功能

 更新時(shí)間:2019年05月28日 08:36:28   作者:grylf  
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)搜索功能的具體代碼,供大家參考,具體內(nèi)容如下

methods (要有一定的觸發(fā)條件才能執(zhí)行,如點(diǎn)擊事件)

<template>
 <div class="safetyInfo">
 <input type="text" name="" id="" placeholder="搜索" v-model="search"/> 
 <button @click="btn">搜索</button>
 <ul v-for="list in searchData">
 <li>
  <span>{{list.name}}</span>
  <span>{{list.date}}</span>
  <span>{{list.depart}}</span>
 </li>
 </ul>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
  search:'',
  searchData: '',
 products:[
  //假數(shù)據(jù)
  {name:"數(shù)據(jù)1",date:'2018-01-04',depart:'瀘化工1'},
  {name:"數(shù)據(jù)2",date:'2018-01-25',depart:'瀘化工2'},
  {name:"數(shù)據(jù)3",date:'2018-02-10',depart:'瀘化工3'},
  {name:"數(shù)據(jù)4",date:'2018-03-04',depart:'瀘化工4'},
  {name:"數(shù)據(jù)5",date:'2018-05-24',depart:'瀘化工5'},
  {name:"數(shù)據(jù)6",date:'2018-10-29',depart:'瀘化工6'}
  ]
 }
 },
 methods:{
 btn:function(){
 
 var search = this.search;
 if (search) {
 this.searchData = this.products.filter(function(product) {
  console.log(product)
 return Object.keys(product).some(function(key) {
  console.log(key)
  return String(product[key]).toLowerCase().indexOf(search) > -1
 })
 })
 }
 
 }
 }
}
</script>

computed (在HTML DOM加載后馬上執(zhí)行的,如賦值):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 
<div id="app">
<input v-model='search' />
<ul v-for="item in searchData ">
<li>{{item.name}},價(jià)格:¥{{item.price}}</li>
</ul>
</div>
 
 
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
products: [{
name: '蘋果',
price: 25,
category: "水果"
}, {
name: '香蕉',
price: 15,
category: "水果"
}, {
name: '雪梨',
price: 65,
category: "水果"
}, {
name: '寶馬',
price: 2500,
category: "汽車"
}, {
name: '奔馳',
price: 10025,
category: "汽車"
}, {
name: '柑橘',
price: 15,
category: "水果"
}, {
name: '奧迪',
price: 25,
category: "汽車"
}]
},
computed: {
searchData: 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;
}
}
})
</script>
 
 
</body>
</html>

注:some()為數(shù)組中的每個(gè)元素執(zhí)行一次callback函數(shù),直到它找到一個(gè)返回值為可以轉(zhuǎn)化為布爾值true的值,此時(shí)some()方法將立刻返回true,否則立刻返回false 

by the way:

watch 它用于觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng)。對(duì)應(yīng)一個(gè)對(duì)象,鍵是觀察表達(dá)式,值是對(duì)應(yīng)回調(diào)。值也可以是方法名,或者是對(duì)象,包含選項(xiàng)。

所以他們的執(zhí)行順序?yàn)椋耗J(rèn)加載的時(shí)候先computed再watch,不執(zhí)行methods;等觸發(fā)某一事件后,則是:先methods再watch。

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

相關(guān)文章

  • vue新手入門出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案

    vue新手入門出現(xiàn)function () { [native code]&nbs

    這篇文章主要介紹了vue新手入門出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue實(shí)現(xiàn)element上傳多張圖片瀏覽刪除功能

    vue實(shí)現(xiàn)element上傳多張圖片瀏覽刪除功能

    這篇文章主要介紹了vue實(shí)現(xiàn)element上傳多張圖片瀏覽刪除功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2023-10-10
  • 在vue中nextTick用法及nextTick 的原理是什么

    在vue中nextTick用法及nextTick 的原理是什么

    這篇文章主要介紹了在vue中nextTick用法及nextTick 的原理是什么,Vue.js 是一個(gè)流行的前端框架,它提供了一種響應(yīng)式的數(shù)據(jù)綁定機(jī)制,使得頁面的數(shù)據(jù)與頁面的 UI 組件之間能夠自動(dòng)同步,需要的朋友可以參考下
    2023-04-04
  • Vue關(guān)于element穿梭框進(jìn)行的修改成table表格穿梭框方式

    Vue關(guān)于element穿梭框進(jìn)行的修改成table表格穿梭框方式

    這篇文章主要介紹了Vue關(guān)于element穿梭框進(jìn)行的修改成table表格穿梭框方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • vue3 setup語法糖下的定時(shí)器的使用與銷毀

    vue3 setup語法糖下的定時(shí)器的使用與銷毀

    如果在組件中需要使用定時(shí)器,注意在銷毀組件的時(shí)候,要對(duì)定時(shí)器進(jìn)行銷毀,否則時(shí)間長了會(huì)導(dǎo)致頁面卡頓,這篇文章給大家介紹vue3 setup語法糖下的定時(shí)器的使用與銷毀的知識(shí),感興趣的朋友一起看看吧
    2024-02-02
  • Electron-store本地存儲(chǔ)功能用法詳解

    Electron-store本地存儲(chǔ)功能用法詳解

    這篇文章主要為大家介紹了Electron-store本地存儲(chǔ)功能的用法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • vue props對(duì)象validator自定義函數(shù)實(shí)例

    vue props對(duì)象validator自定義函數(shù)實(shí)例

    今天小編就為大家分享一篇vue props對(duì)象validator自定義函數(shù)實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue報(bào)錯(cuò)Component?name"Home"should?always?be?multi問題

    Vue報(bào)錯(cuò)Component?name"Home"should?always?be?mult

    這篇文章主要介紹了Vue報(bào)錯(cuò)Component?name"Home"should?always?be?multi問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解

    Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解

    這篇文章主要為大家介紹了Vue高性能列表GridList組件及實(shí)現(xiàn)思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11
  • 詳解如何在Vue3中捕獲和處理錯(cuò)誤

    詳解如何在Vue3中捕獲和處理錯(cuò)誤

    Vue 3 作為前端開發(fā)中一個(gè)非常流行的框架,在錯(cuò)誤處理方面提供了靈活和強(qiáng)大的能力,本文將深入介紹在 Vue 3 中如何捕獲和處理錯(cuò)誤,包括組件級(jí)的錯(cuò)誤處理、全局錯(cuò)誤處理以及如何與異常日志系統(tǒng)集成,需要的朋友可以參考下
    2024-07-07

最新評(píng)論