vue?過(guò)濾、模糊查詢(xún)及計(jì)算屬性?computed詳解
更新時(shí)間：2022年11月01日 10:18:47 作者：丶涼雨拾憶
計(jì)算屬性是vue里面為了簡(jiǎn)化在模板語(yǔ)法中對(duì)響應(yīng)式屬性做計(jì)算而存在的，這篇文章主要介紹了vue?過(guò)濾、模糊查詢(xún)（計(jì)算屬性?computed）,需要的朋友可以參考下
什么是計(jì)算屬性
概念
計(jì)算屬性是vue里面為了簡(jiǎn)化在模板語(yǔ)法中對(duì)響應(yīng)式屬性做計(jì)算而存在的
什么時(shí)候應(yīng)該使用計(jì)算屬性
根據(jù)現(xiàn)有響應(yīng)式的值得到一個(gè)新的值
1、結(jié)構(gòu)
<!--
* @Descripttion: 類(lèi)型判斷
* @version: 0.0.1
* @Author: PengShuai
* @Date: 2022年08月01日09:26:17
* @LastEditors: PengShuai
* @LastEditTime: 2022年08月02日14:24:04
-->
<template>
<div class="Ling">
<input type="text" v-model="searchValue" />
<div v-for="(item, index) in personInfoListSearch" :key="index">
{{ item.personIdAndName }}
</div>
</div>
</template>
2、數(shù)據(jù)
data() {
return {
// 查詢(xún)值
searchValue: "",
personInfo: [
{
personId: "gailun",
personIdAndName: "(gailun)蓋倫",
personName: "蓋倫"
},
{
personId: "aobama",
personIdAndName: "(aobama)奧巴馬",
personName: "奧巴馬"
},
{
personId: "psmart",
personIdAndName: "(psmart)ps",
personName: "ps"
}
]
};
},
3、計(jì)算屬性
computed: {
// 人員查詢(xún)
personInfoListSearch() {
return this.personInfo.filter(o => {
return (
o.personId.indexOf(this.searchValue) > -1 ||
o.personName.indexOf(this.searchValue) > -1
);
});
}
}
到此這篇關(guān)于vue 過(guò)濾、模糊查詢(xún)（計(jì)算屬性 computed）的文章就介紹到這了,更多相關(guān)vue 過(guò)濾、模糊查詢(xún)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了element-ui upload組件多文件上傳的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
平常使用Vue開(kāi)發(fā)時(shí),一個(gè)項(xiàng)目中多個(gè)地方需要用到的相同組件通常我們會(huì)封裝為一個(gè)公共組件,所以我們可以將封裝好的組件打包發(fā)布至npm,本文主要介紹了vue組件發(fā)布成npm包,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
vue components 動(dòng)態(tài)組件詳解
這篇文章主要介紹了vue components 動(dòng)態(tài)組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue的watch和watchEffect，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動(dòng)分頁(yè)預(yù)覽)
這篇文章主要介紹了vue-pdf插件實(shí)現(xiàn)pdf文檔預(yù)覽方式(自動(dòng)分頁(yè)預(yù)覽)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
在項(xiàng)目開(kāi)發(fā)中我們難免碰到需要對(duì)webpack配置更改的情況,下面這篇文章主要給大家介紹了關(guān)于vuecli中chainWebpack的常用操作舉例,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue-quill-editor富文本編輯器上傳視頻功能詳解
需求需要實(shí)現(xiàn)富文本的功能,同時(shí)富文本中還可以上傳視頻和圖片,選來(lái)選去最后決定了用這個(gè)富文本編輯器,下面這篇文章主要給大家介紹了關(guān)于vue-quill-editor富文本編輯器上傳視頻功能的相關(guān)資料,需要的朋友可以參考下2023-05-05
使用vue ant design分頁(yè)以及表格分頁(yè)改為中文問(wèn)題
這篇文章主要介紹了使用vue ant design分頁(yè)以及表格分頁(yè)改為中文問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
vscode下vue項(xiàng)目中eslint的使用方法
這篇文章主要給大家介紹了關(guān)于vscode下vue項(xiàng)目中eslint的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
最近做項(xiàng)目遇到這樣的一個(gè)需求，通過(guò)select元素來(lái)選擇音頻文件的名稱(chēng)，點(diǎn)擊按鈕可以進(jìn)行試聽(tīng)。接下來(lái)通過(guò)本文給大家介紹vue項(xiàng)目中通過(guò)點(diǎn)擊事件讀取音頻文件的方法,需要的朋友可以參考下2018-05-05