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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于Vue3实现无限滚动组件的示例代码

    基于Vue3实现无限滚动组件的示例代码

    如果你在社交媒体上停留的时间过长,那么,你所在的网站很可能正在使用无限滚动组件。这篇文章教你利用Vue3实现无限滚动组件,感兴趣的可以参考一下
    2022-09-09
  • 解决vue app.js/vender.js过大优化启动页

    解决vue app.js/vender.js过大优化启动页

    这篇文章主要为大家介绍了解决vue app.js/vender.js过大优化启动页过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 深入了解Vue之组件的生命周期流程

    深入了解Vue之组件的生命周期流程

    每个Vue实例在创建时都要经过一系列初始化, 例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等,同时, 也会运行一些叫作生命周期钩子的函数,接下来让我们一起来探索Vue实例被创建时都经历了什么,感兴趣的同学跟着小编一起来探讨吧
    2023-05-05
  • vue项目创建并引入饿了么elementUI组件的步骤

    vue项目创建并引入饿了么elementUI组件的步骤

    这篇文章主要介绍了vue项目创建并引入饿了么elementUI组件的步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 使用Vue3新特性构建动态表单的方法详解

    使用Vue3新特性构建动态表单的方法详解

    传统的表单开发通常需要编写大量的重复代码,例如处理用户输入、验证数据、更新 UI 等等,为了简化开发,我们可以借助 Vue 3 的新特性,例如组合式 API 和 ref 对象,所以本文我们将一起学习如何使用 Vue 3 的新特性构建一个更加灵活、可扩展的动态表单
    2024-06-06
  • Vue3通过hooks方式封装节流和防抖的代码详解

    Vue3通过hooks方式封装节流和防抖的代码详解

    vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,或者说是一些可以复用的公共方法/功能,本文给大家介绍了Vue3通过hooks方式封装节流和防抖,需要的朋友可以参考下
    2024-10-10
  • vue对象添加属性(key:value)、显示和删除属性方式

    vue对象添加属性(key:value)、显示和删除属性方式

    这篇文章主要介绍了vue对象添加属性(key:value)、显示和删除属性方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue+element-ui实现表格编辑的三种实现方式

    vue+element-ui实现表格编辑的三种实现方式

    这篇文章主要介绍了vue+element-ui实现表格编辑的三种实现方式,主要有表格内部显示和编辑切换,通过弹出另外一个表格编辑和直接通过样式控制三种方式,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • el-upload大文件切片上传实现示例详解

    el-upload大文件切片上传实现示例详解

    这篇文章主要为大家介绍了el-upload大文件切片上传实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 使用Vite2+Vue3渲染Markdown文档的方法实践

    使用Vite2+Vue3渲染Markdown文档的方法实践

    本文主要介绍了Vite2+Vue3渲染Markdown文档的方法实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的可以了解一下
    2021-08-08

最新评论