vue實(shí)現(xiàn)表格過濾功能
更新時(shí)間：2019年09月27日 10:34:51 作者：小羽向前跑
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格過濾功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)表格過濾功能的具體代碼，供大家參考，具體內(nèi)容如下
效果：
組件代碼：
<template>
<div>
<input type="text" v-model="searchText">
<ul>
<li v-for="(book, index) in filterBooks" :key="index">
序號(hào) : {{index}}, 書名 ; {{book.name}}, 價(jià)格 : {{book.price}}
</li>
</ul>
<div>
<button @click="setOrderType(2)">價(jià)格升序</button>
<button @click="setOrderType(1)">價(jià)格降序</button>
<button @click="setOrderType(0)">原始順序</button>
</div>
</div>
</template>
<script>
export default {
name:"filter1",
data () {
return {
searchText: '',
orderType: 0, // 0:默認(rèn)順序, 1:價(jià)格降序, 2:價(jià)格升序
books: [
{name: 'Vue.js', price:50},
{name: 'Javascript', price:30},
{name: 'Css', price:40},
{name: 'Html', price:60}
]
}
},
computed: {
filterBooks () {
const {searchText, books, orderType} = this
let filterArr = new Array();
// 過濾數(shù)組 過濾name鍵
filterArr = books.filter(p => p.name.indexOf(searchText) !== -1)
// 排序
if(orderType) {
filterArr.sort(function (p1, p2) {
if(orderType === 1) { // 降序
return p2.price - p1.price;
} else { // 升序
return p1.price - p2.price;
}
})
}
return filterArr;
}
},
methods: {
setOrderType (orderType) {
this.orderType = orderType
}
}
}
</script>
<style>
</style>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式,具有很的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗(yàn)方式
這篇文章主要介紹了Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue登錄注冊(cè)及token驗(yàn)證實(shí)現(xiàn)代碼
在vue單頁中，我們可以通過監(jiān)控route對(duì)象，從中匹配信息去決定是否驗(yàn)證token，然后定義后續(xù)行為。下面通過實(shí)例代碼給大家分享vue登錄注冊(cè)及token驗(yàn)證功能，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了Vue事件總線的使用問題及解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
Vue 組件參數(shù)校驗(yàn)與非props特性的方法
這篇文章主要介紹了Vue 組件參數(shù)校驗(yàn)與非props特性的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了vue引入css文件導(dǎo)致全局污染的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
kiss-vuex 是一個(gè)非常簡(jiǎn)單的語法糖類庫，這篇文章主要介紹了傻瓜式vuex語法糖kiss-vuex整理，非常具有實(shí)用價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了詳解Vue3?中的計(jì)算屬性及偵聽器，文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以看下一下2022-08-08
手把手教你創(chuàng)建vue3項(xiàng)目的最佳方式
如今的Vue3已經(jīng)勢(shì)不可擋,當(dāng)然搭建一個(gè)全新的Vue3項(xiàng)目也有了全新的方式,下面這篇文章主要給大家介紹了關(guān)于如何手把手教你創(chuàng)建vue3項(xiàng)目的最佳方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11