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实现国际化自动翻译功能实例

    Vue项目中引入translate.js实现国际化自动翻译功能实例

    translate.js帮你一行代码搞定翻译,支持Google、DeepL、LibreTranslate等多个主流翻译引擎,Node.js和浏览器通用,这篇文章主要介绍了Vue项目中引入translate.js实现国际化自动翻译功能的相关资料,需要的朋友可以参考下
    2025-07-07
  • Vue3中导航守卫结合Axios实现token认证机制

    Vue3中导航守卫结合Axios实现token认证机制

    本文主要介绍了Vue3中导航守卫结合Axios实现token认证机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-01-01
  • 使用element ui中el-table-column进行自定义校验

    使用element ui中el-table-column进行自定义校验

    这篇文章主要介绍了使用element ui中el-table-column进行自定义校验方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 利用vue组件自定义v-model实现一个Tab组件方法示例

    利用vue组件自定义v-model实现一个Tab组件方法示例

    这篇文章主要给大家介绍了关于利用vue组件自定义v-model实现一个Tab组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • Vue ElementUI table实现表格斜线分隔线

    Vue ElementUI table实现表格斜线分隔线

    这篇文章主要为大家详细介绍了Vue ElementUI table实现表格斜线分隔线,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue组件化开发的必备技能之组件递归

    Vue组件化开发的必备技能之组件递归

    组件是可以在它们自己的模板中调用自身的,不过它们只能通过 name 选项来做这件事,下面这篇文章主要给大家介绍了关于Vue组件化开发的必备技能之组件递归的相关资料,需要的朋友可以参考下
    2022-01-01
  • vue2.0+koa2+mongodb实现注册登录

    vue2.0+koa2+mongodb实现注册登录

    这篇文章主要介绍了vue2.0+koa2+mongodb实现注册登录功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • Vue2动态添加属性导致页面不更新的原因与解决方案

    Vue2动态添加属性导致页面不更新的原因与解决方案

    在 Vue2 开发中,经常会遇到这样一个问题:对象新增属性后,数据虽然更新了,但页面并没有随之更新,本文将通过一个例子来说明原因,并给出解决方案,需要的朋友可以参考下
    2025-10-10
  • vue路由传参及获取参数的方式总结

    vue路由传参及获取参数的方式总结

    这篇文章主要介绍了vue路由传参及获取参数的方式总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue中Element-ui 输入银行账号每四位加一个空格的实现代码

    vue中Element-ui 输入银行账号每四位加一个空格的实现代码

    我们在输入银行账号会设置每四位添加一个空格,输入金额,每三位添加一个空格。那么,在vue,element-ui 组件中,如何实现呢?下面小编给大家带来了vue中Element-ui 输入银行账号每四位加一个空格的实现代码,感兴趣的朋友一起看看吧
    2018-09-09

最新评论