vue根据数组type筛选数据

最新推荐文章于 2024-04-29 18:41:45 发布
最新推荐文章于 2024-04-29 18:41:45 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 杂货 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45682701/article/details/121476052
版权

vue根据数组中的数组筛选数据


功能主要是type为2的是按钮权限，type为1的是菜单列表，前端要根据children里的type做出判断。
最终效果是动态渲染菜单栏

代码如下


在这里插入图片描述

爱吃虾尾吗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 数组常用方法（总结）
qq_38295471的博客
03-14 3384
vue 数组常用方法(总结)
element el-button按钮，根据不同数据改变按钮type类型 调整按钮颜色
蓝胖子的博客
09-20 5831
element el-button按钮，根据不同数据改变按钮type类型 调整按钮颜色
Vue：数组的过滤排序显示客户端实现
2401_84433829的博客
04-29 742
{{ index + 1 }})姓名：{{ person.name }} —— 性别：{{ person.sex }} —— 年龄：{{ person.age }} —— 电话：{{ person.phone }}{{index+1}})姓名：{{person.name}} —— 性别：{{person.sex}} —— 年龄：{{person.age}} —— 电话：{{person.phone}}新的数组初始情况下是等于所有人数组的，输入姓名后，会进行过滤，然后进行展示。// 取出数组中的数据。
vue v-for循环数据列表，点击获取循环列表当前项的某一项的数据
m0_74387152的博客
12-05 1362
vue v-for循环数据列表，点击获取循环列表当前项的某一项的数据
vue(三)
qq_53293179的博客
03-12 6810
列表过滤+列表排序+收集表单数据+过滤器 初识vue 模板语法 转存失败重新上传取消 数据绑定 转存失败重新上传取消 el与data的两种写法 转存失败重..
vue中数组对应方法的使用
xiaoxiao1777的博客
04-30 1103
数组中某一条数据的更新 当界面上一条数据更新后，应该把对应数组中该数据替换掉 //直接数组中这一项等于新数据对象，就相当于覆盖掉了旧数据，其实本质是该项指针指向了新的数据对象，简单有效 updateUser(index,newUser){ this.users[index] = newUser } data:{ users:[ {name: 'tom',age:...
vue 对象数组中，根据相同属性的数据合并，重组新的数组对象
01-20
在Vue.js开发中，处理对象数组并根据特定属性进行数据合并和重组是常见的需求。本问题探讨了如何根据`TYPE`和`REMARK`两个属性的值来决定是否合并对象，并生成新的数组对象。首先，我们需要理解源数据的结构，然后...
VUE实现移动端列表筛选功能
10-16
在Vue.js中实现移动端列表筛选功能，通常涉及到组件化开发、事件绑定以及数据管理等多个方面。以下是一个基于Vue和 vant 框架实现的简单示例，它包括一个可展开的筛选菜单和筛选按钮。 首先，`...
vue input输入框关键字筛选检索列表数据展示
12-29
想必大家在项目开发中难免会用到关键字筛选的功能，正好这次项目有需求要做这一块，就整理一下vue的input输入框输入关键字检索数据列表的代码。下面直接上代码： html： <!-- 筛选demo --> <input ...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
【Vue + Echarts 实现动态绘制...这样，通过 Vue 配合 Echarts，就可以实现动态绘制图表并根据异步加载的数据进行实时更新。记得在每次数据变化后，都使用 `myChart.setOption` 来刷新图表，以确保图表与数据保持同步。
前端 vue2 读表格数据
最新发布
05-31
这个过程中，你还可以根据实际需求进行数据过滤、格式化、排序等操作，以满足各种复杂的应用场景。在实际项目中，你可能还会遇到处理大量数据的性能优化问题，可以考虑使用分页、虚拟滚动等技术。同时，如果你需要对...
当vue里面props属性type为数组或者对象需要设置默认值为空数组或对象
我的博客
07-26 6758
一、vue官方文档解释为该prop指定一个默认值。如果该prop没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
JavaScript 筛选数组
火星基地
10-23 626
要求： 从一个数组中，筛选出符合条件的元素，放到新数组中。 有一数组[1, 19, 2, 8, 9, 15, 11, 7, 6, 4, 18, 10]，将超过10的元素删除。 代码实现： var arr = [1, 19, 2, 8, 9, 15, 11, 7, 6, 4, 18, 10]; var newArr = []; for (var i = 0; i < arr.length; i++) { if (arr[i] <= 10) { // newArr[newAr
vue字典维护，根据属性值数组拿到匹配的数据
qq_45061876的博客
02-27 1019
字典维护数据的数据调用
web前端之vue2知识点
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
06-16 1320
web前端之vue2知识点
Vue实例：类目筛选功能
weixin_50981935的博客
07-10 1444
前言 类目筛选功能： 每行只能选中一个 选中的标签绑定不同的类，有不同的显示效果 点击“x”能去掉显示效果 一、css样式准备 <style> body { background: #b5abb3; } dl, dd, h3, p { margin: 0; } h3 { display: inline-block; }
vue 点击按钮筛选功能_vue分类筛选filter方法简单实例
weixin_39685674的博客
12-22 2236
本文实例为大家分享了vue分类筛选filter方法的具体代码，供大家参考，具体内容如下filter{{item}}加载更多var vm = new Vue({el: '#app',data: {size:5,list:[{"id":0,"title":"11111","cont":"111111"},{"id":1,"title":"22222","cont":"111111"},{"id":2,...
vue的基本类型/值类型（primitive type / value type）和非基本类型/引用类型（non-primitive type / reference type）的区别
水墨熊猫
03-26 2845
基本概念 基本类型也称为值类型，字符串（Sring）、布尔值（Boolean）和数字（Number）这些都是基本类型（primitive type）。 非基本类型也可以理解为引用类型，数组（Array）和对象（Object）都属于引用类型（reference type） 区别 基本类型 基本类型/值类型（primitive type / value type）的变量直接保存的就是数据。 引用类型 引用类型（reference type）存放的值是指向数据的引用（reference），而不是数据本身。 这也是
vue 按条件筛选 坊商品
a2QWSDN的博客
07-27 165
<template> <div> <div> <ulstyle="display:flex;"> {{search}} <ulclass="citys">城市：</ul> <ulclass="citys"style="margin-left:10px;"v-for="(item,index,key)incity":key="inde...
vue+ts怎么判断数组的数据并筛选
05-11
例如，假设有一个数组 `list`，其中每个元素都是一个对象，对象中有一个 `type` 属性，我们想要筛选出 `type` 为 `A` 的元素，代码如下： ```typescript interface Item { type: string; // 其他属性 } export ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值