vue如何對(duì)一個(gè)數(shù)據(jù)過(guò)濾出想要的item
vue對(duì)一個(gè)數(shù)據(jù)過(guò)濾出想要的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ù)過(guò)濾、數(shù)據(jù)格式化)
示例

當(dāng)待展示的文本信息過(guò)長(zhǎng)時(shí),我們需要對(duì)數(shù)據(jù)進(jìn)行格式化過(guò)濾。

filters用法
1、在script中filters下添加一個(gè)自定義的處理函數(shù)

2、在數(shù)據(jù)變量處,進(jìn)行數(shù)據(jù)過(guò)濾

代碼段附錄:
<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是一款簡(jiǎn)單易用的Icon制作工具,助您快速制作所需Icon (操作簡(jiǎn)便,拖拽進(jìn)入,一鍵導(dǎo)出)。軟件下載 http://scimence.cn/soft/easyicon/easyIcon.exe easyIcon是一款簡(jiǎn)單易用的Icon制作工具,助您快速制作所需Icon (操作簡(jiǎn)便,拖拽進(jìn)入,一鍵導(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é)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中的provide/inject的學(xué)習(xí)使用
本篇文章主要介紹了vue中的provide/inject的學(xué)習(xí)使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例
本文主要介紹了vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
基于vue和react的spa進(jìn)行按需加載的實(shí)現(xiàn)方法
這篇文章主要介紹了基于vue和react的spa進(jìn)行按需加載,需要的朋友可以參考下2018-09-09
Vue 路由切換時(shí)頁(yè)面內(nèi)容沒有重新加載的解決方法
今天小編就為大家分享一篇Vue 路由切換時(shí)頁(yè)面內(nèi)容沒有重新加載的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue3中defineEmits與defineProps的用法實(shí)例
這篇文章主要介紹了vue3中defineEmits/defineProps的用法實(shí)例,需要的朋友可以參考下2023-12-12
elementUI樣式修改未生效問題詳解(掛載到了body標(biāo)簽上)
vue+elementUI項(xiàng)目開發(fā)中,經(jīng)常遇到修改elementUI組件樣式無(wú)效的問題,這篇文章主要給大家介紹了關(guān)于elementUI樣式修改未生效問題的相關(guān)資料,掛載到了body標(biāo)簽上,需要的朋友可以參考下2023-04-04

