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对象添加属性(key:value)、显示和删除属性方式
这篇文章主要介绍了vue对象添加属性(key:value)、显示和删除属性方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07
最新评论