vue?過濾、模糊查詢及計算屬性?computed詳解
更新時間：2022年11月01日 10:18:47 作者：丶涼雨拾憶
計算屬性是vue里面為了簡化在模板語法中對響應式屬性做計算而存在的，這篇文章主要介紹了vue?過濾、模糊查詢（計算屬性?computed）,需要的朋友可以參考下
什么是計算屬性
概念
計算屬性是vue里面為了簡化在模板語法中對響應式屬性做計算而存在的
什么時候應該使用計算屬性
根據(jù)現(xiàn)有響應式的值得到一個新的值
1、結(jié)構(gòu)
<!--
* @Descripttion: 類型判斷
* @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 {
// 查詢值
searchValue: "",
personInfo: [
{
personId: "gailun",
personIdAndName: "(gailun)蓋倫",
personName: "蓋倫"
},
{
personId: "aobama",
personIdAndName: "(aobama)奧巴馬",
personName: "奧巴馬"
},
{
personId: "psmart",
personIdAndName: "(psmart)ps",
personName: "ps"
}
]
};
},
3、計算屬性
computed: {
// 人員查詢
personInfoListSearch() {
return this.personInfo.filter(o => {
return (
o.personId.indexOf(this.searchValue) > -1 ||
o.personName.indexOf(this.searchValue) > -1
);
});
}
}
到此這篇關于vue 過濾、模糊查詢（計算屬性 computed）的文章就介紹到這了,更多相關vue 過濾、模糊查詢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了el-table樹形表格表單驗證(列表生成序號)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
在微信小程序中,默認情況下,文件預覽功能不支持文檔縮放,導致用戶在遇到小字體時難以清晰閱讀,為了解決這一問題并提升用戶體驗,實現(xiàn)文檔的縮放功能至關重要,所以本文2024-12-12
vue之父子組件間通信實例講解(props、$ref、$emit)
組件間如何通信，也就成為了vue中重點知識了。這篇文章將會通過props、$ref和 $emit 這幾個知識點，來講解如何實現(xiàn)父子組件間通信。2018-05-05
Monaco?Editor開發(fā)SQL代碼提示編輯器實例詳解
這篇文章主要為大家介紹了Monaco?Editor開發(fā)SQL編輯器實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本文主要介紹了VUE3之Non-Props屬性的具體使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue?codemirror實現(xiàn)在線代碼編譯器效果
這篇文章主要介紹了vue-codemirror實現(xiàn)在線代碼編譯器?,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
這篇文章主要為大家詳細介紹了Vue.js組件實現(xiàn)選項卡以及切換特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家詳細介紹了vuejs父子組件之間的數(shù)據(jù)交互，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
本文主要介紹了VUE側(cè)邊導航欄實現(xiàn)篩選過濾的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05