vue如何對一個數(shù)據(jù)過濾出想要的item
更新時間：2023年10月21日 16:36:32 作者：任立輝
這篇文章主要介紹了vue如何對一個數(shù)據(jù)過濾出想要的item問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue對一個數(shù)據(jù)過濾出想要的item
//方法中調(diào)用，然后賦值給data，或者用vue 的filters，后面研究
this.dataList.forEach((item, index) => {
const newSubList = this.dataList[index].gradeChoSubList.filter((item) => {
return item.subjectName === '物理' | item.subjectName === '歷史'
})
// 物理和歷史比例條數(shù)據(jù)
this.physicsHistorylist = newSubList
console.log(newSubList)
vue filters用法（數(shù)據(jù)過濾、數(shù)據(jù)格式化）
示例
當待展示的文本信息過長時，我們需要對數(shù)據(jù)進行格式化過濾。
filters用法
1、在script中filters下添加一個自定義的處理函數(shù)
2、在數(shù)據(jù)變量處，進行數(shù)據(jù)過濾
代碼段附錄：
<template>
<div >
<div class="PosContent">
{{content | contentFormat}}
</div>
<div class="PosButton">
詳情
</div>
</div>
</template>
<script>
export default {
name: 'Empty',
props: {
// soft: String,
data2: {},
},
data () {
return {
visible: true,
content: 'easyIcon是一款簡單易用的Icon制作工具，助您快速制作所需Icon (操作簡便，拖拽進入，一鍵導(dǎo)出)。軟件下載 http://scimence.cn/soft/easyicon/easyIcon.exe easyIcon是一款簡單易用的Icon制作工具，助您快速制作所需Icon (操作簡便，拖拽進入，一鍵導(dǎo)出)',
}
},
filters: {
contentFormat(content)
{
if(content.length > 56)
{
return content.substring(0, 56) + '...';
}
else return content;
}
},
mounted() {
},
created() {
},
methods: {
}
}
</script>
<style scoped>
</style>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項目中引入translate.js實現(xiàn)國際化自動翻譯功能實例
translate.js幫你一行代碼搞定翻譯,支持Google、DeepL、LibreTranslate等多個主流翻譯引擎,Node.js和瀏覽器通用,這篇文章主要介紹了Vue項目中引入translate.js實現(xiàn)國際化自動翻譯功能的相關(guān)資料,需要的朋友可以參考下2025-07-07
Vue3中導(dǎo)航守衛(wèi)結(jié)合Axios實現(xiàn)token認證機制
本文主要介紹了Vue3中導(dǎo)航守衛(wèi)結(jié)合Axios實現(xiàn)token認證機制,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
使用element ui中el-table-column進行自定義校驗
這篇文章主要介紹了使用element ui中el-table-column進行自定義校驗方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
利用vue組件自定義v-model實現(xiàn)一個Tab組件方法示例
這篇文章主要給大家介紹了關(guān)于利用vue組件自定義v-model實現(xiàn)一個Tab組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
Vue?ElementUI?table實現(xiàn)表格斜線分隔線
這篇文章主要為大家詳細介紹了Vue?ElementUI?table實現(xiàn)表格斜線分隔線，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
組件是可以在它們自己的模板中調(diào)用自身的,不過它們只能通過?name?選項來做這件事,下面這篇文章主要給大家介紹了關(guān)于Vue組件化開發(fā)的必備技能之組件遞歸的相關(guān)資料,需要的朋友可以參考下2022-01-01
vue2.0+koa2+mongodb實現(xiàn)注冊登錄
這篇文章主要介紹了vue2.0+koa2+mongodb實現(xiàn)注冊登錄功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
Vue2動態(tài)添加屬性導(dǎo)致頁面不更新的原因與解決方案
在 Vue2 開發(fā)中,經(jīng)常會遇到這樣一個問題：對象新增屬性后,數(shù)據(jù)雖然更新了,但頁面并沒有隨之更新,本文將通過一個例子來說明原因,并給出解決方案,需要的朋友可以參考下2025-10-10
這篇文章主要介紹了vue路由傳參及獲取參數(shù)的方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue中Element-ui 輸入銀行賬號每四位加一個空格的實現(xiàn)代碼
我們在輸入銀行賬號會設(shè)置每四位添加一個空格，輸入金額，每三位添加一個空格。那么，在vue，element-ui 組件中，如何實現(xiàn)呢？下面小編給大家?guī)砹藇ue中Element-ui 輸入銀行賬號每四位加一個空格的實現(xiàn)代碼，感興趣的朋友一起看看吧2018-09-09