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ù)格式化)
示例
當(dāng)待展示的文本信息過長時,我們需要對數(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中的provide/inject的學(xué)習(xí)使用
本篇文章主要介紹了vue中的provide/inject的學(xué)習(xí)使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05基于vue和react的spa進行按需加載的實現(xiàn)方法
這篇文章主要介紹了基于vue和react的spa進行按需加載,需要的朋友可以參考下2018-09-09vue3中defineEmits與defineProps的用法實例
這篇文章主要介紹了vue3中defineEmits/defineProps的用法實例,需要的朋友可以參考下2023-12-12elementUI樣式修改未生效問題詳解(掛載到了body標簽上)
vue+elementUI項目開發(fā)中,經(jīng)常遇到修改elementUI組件樣式無效的問題,這篇文章主要給大家介紹了關(guān)于elementUI樣式修改未生效問題的相關(guān)資料,掛載到了body標簽上,需要的朋友可以參考下2023-04-04