vue如何对一个数据过滤出想要的item
更新时间:2023年10月21日 16:36:32 作者:任立辉
这篇文章主要介绍了vue如何对一个数据过滤出想要的item问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue对一个数据过滤出想要的item
//方法中调用,然后赋值给data,或者用vue 的filters,后面研究
this.dataList.forEach((item, index) => {
const newSubList = this.dataList[index].gradeChoSubList.filter((item) => {
return item.subjectName === '物理' | item.subjectName === '历史'
})
// 物理和历史比例条数据
this.physicsHistorylist = newSubList
console.log(newSubList)
vue filters用法(数据过滤、数据格式化)
示例

当待展示的文本信息过长时,我们需要对数据进行格式化过滤。

filters用法
1、在script中filters下添加一个自定义的处理函数

2、在数据变量处,进行数据过滤

代码段附录:
<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 (操作简便,拖拽进入,一键导出)。软件下载 http://scimence.cn/soft/easyicon/easyIcon.exe easyIcon是一款简单易用的Icon制作工具,助您快速制作所需Icon (操作简便,拖拽进入,一键导出)',
}
},
filters: {
contentFormat(content)
{
if(content.length > 56)
{
return content.substring(0, 56) + '...';
}
else return content;
}
},
mounted() {
},
created() {
},
methods: {
}
}
</script>
<style scoped>
</style>总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue项目中引入translate.js实现国际化自动翻译功能实例
translate.js帮你一行代码搞定翻译,支持Google、DeepL、LibreTranslate等多个主流翻译引擎,Node.js和浏览器通用,这篇文章主要介绍了Vue项目中引入translate.js实现国际化自动翻译功能的相关资料,需要的朋友可以参考下2025-07-07
使用element ui中el-table-column进行自定义校验
这篇文章主要介绍了使用element ui中el-table-column进行自定义校验方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
利用vue组件自定义v-model实现一个Tab组件方法示例
这篇文章主要给大家介绍了关于利用vue组件自定义v-model实现一个Tab组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
我们在输入银行账号会设置每四位添加一个空格,输入金额,每三位添加一个空格。那么,在vue,element-ui 组件中,如何实现呢?下面小编给大家带来了vue中Element-ui 输入银行账号每四位加一个空格的实现代码,感兴趣的朋友一起看看吧2018-09-09


最新评论