3、功能實現
在vue專案中,搜尋功能是我們經常需要使用的乙個場景,最常用的是在列表資料中搜尋乙個想要的,今天的例子就是我們實現vue從列表資料中搜尋,並展示。如下圖所示:
2.1功能流程
這裡我們進行簡單搜尋功能,搜尋邏輯是只要使用者輸入值與產品的名稱進行模糊匹配,符合條件的資料進行展示,不符合條件的資料過濾。流程描述如下:
檢測到搜尋框值變化,取使用者輸入值;
對使用者輸入值進行判斷,若為空,則展示原列表,不為空則進行篩選;
將使用者輸入值與所有列表資料進行遍歷匹配,若匹配,則展示匹配條目,完成搜尋。
2.2 流程圖
這張圖僅代表最簡單的搜尋流程,若需要進行一些複雜的處理,可以進行修改,比如說匹配的商品名稱關鍵字變色等。
3.1 vue元件化
實現如上圖功能,我們肯定是使用vue的元件特性,將搜尋以及,產品列表抽成元件,以提高**復用性,抽成元件之後,該頁面將由三個部分組成,資料在以下三個元件之間傳遞:
3.2 **
父元件:index.vue
>
>
:title
="title"
@goback
="goback"
>
title-bar
>
:plhtext
="searchplhtext"
@input-changed
="searchinputchange"
>
search-input
>
v-for
="(prd,index) in productlistrst"
:key
="index"
>
:prd
="prd"
@toprddetail
="toprddetail"
>
prd-item
>
div>
div>
template
>
vue前端路由搜尋功能實現
目的 引數拼接在url位址列上可以直接把資料渲染到對應頁面。實現思路 第一種情況 一層層點進去 通過vue得前端路由實現,在商品資訊那個元件中放乙個預設得請求資料,當點選商品資訊時候,讓他直接push到goods view中並攜帶著請求引數,goods view中給後端傳送資料請求並渲染。在1得基礎...
Django 簡單實現分頁與搜尋功能
假設現有需求如下 需要乙個頁面分頁展示資訊,在該頁面新增搜尋框以提供檢索功能。那麼,我們知道,展示資訊和檢索功能是在同乙個頁面,也就是共用乙個路由。如下 第一步,寫路由 為了清晰,這裡只給出主頁和展示頁面的路由。urls.py from django.urls import path from im...
實現搜尋功能
準備檢視函式search 修改base.html 中搜尋輸入框所在的 form action method get input type text placeholder 搜尋從這裡開始.style width 180px margin left auto height 30px padding l...