vue/uniapp 动态设置键值,重组数组

这篇具有很好参考价值的文章主要介绍了vue/uniapp 动态设置键值,重组数组。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

场景:
1、把单一数字,根据某一个字段作为键值重组新的数组。
2、使用vue的 s e t 函数 set函数 set函数set(数组,键,值 )

//原始数组
oArr=[
{id: 1, type: 2, title:'aaa'},
{id: 2, type: 2, title:'aaa'}
{id: 3, type: 2, title:'bbb'},
{id: 4, type: 2, title:'aaa'}
];
//处理
var newArr={};
oArr.map(item => {
		if (!newArr[item.title]) {//空键值处理
			this.$set(newArr, item.title, [])
		}
		newArr[item.title].push(item)
	})
	console.info(newArr)

获得新数组:

newArr={
	aaa:[
		{id: 1, type: 2, title:'aaa'},
		{id: 2, type: 2, title:'aaa'}
		{id: 4, type: 2, title:'aaa'}
	]
	bbb:[
		{id: 3, type: 2, title:'bbb'},
	]
};

终了~文章来源地址https://www.toymoban.com/news/detail-555371.html

到了这里,关于vue/uniapp 动态设置键值,重组数组的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用 v-for 指令和数组来实现在 Uni-app 中动态增减表单项并渲染多个数据

    在 data 中定义一个数组,用于存储表单项的数据: 在模板中使用 v-for 指令渲染表单项: 在 methods 中定义添加和删除表单项的方法: 这样,每点击一次 “添加表单项” 按钮,就会新增一个表单项,并且你可以通过输入框的 v-model 来动态修改表单项的值。点击对应的 “删除”

    2024年02月10日
    浏览(40)
  • #Uniapp:uni-app中vue2生命周期--11个

    uni-app中vue2生命周期 生命周期钩子 描述 H5 App端 小程序 说明 beforeCreate 在实例初始化之后被调用 详情 √ √ √ created 在实例创建完成后被立即调用 详情 √ √ √ beforeMount 在挂载开始之前被调用 详情 √ √ √ mounted 挂载到实例上去之后调用 详情 注意:此处并不能确定子组件

    2024年02月02日
    浏览(51)
  • 【uniapp 动态设置 起始页 默认展示页面 】

    在开发一次uiapp app时,需要动态设置起始页,默认展示页,没有登录去登录页,登录了去首页 因为uniapp 是 pages 的第一个是默认页 所以这里我们需要处理 一下才能完美的实现。 1:manifest.json 设置app 的启动页 也就是最开始 转圈的那个页面 不要他自动关闭 设置了这一步后,

    2024年02月12日
    浏览(38)
  • js动态设置关键侦@keyframes

    js动态设置关键侦@keyframes 1.前置知识 关键侦 @keyframes 规则通过在动画序列中定义关键侦的样式来控制 CSS 动画序列的中间步骤 注意 ,如果在 CSS 中定义了两个相同名字的 keyframes ,后这会覆盖前者 如上图所示,定义了两个相同的动画侦之后,最终在浏览器中应用的是后者 2

    2024年01月17日
    浏览(31)
  • JS如何获取对象的键名、键值

    使用Object.keys()获取对象的键名 object.keys()方法只返回对象的键名,并转换为一个数组。 使用Object.entries()获取对象的键名 object.entries()方法是从对象中获取每个键值对,并将这些键值对转换为一个数组并将它们存储在一个大数组中。此方法只接受一个参数,即对象本身。 使用

    2024年02月12日
    浏览(40)
  • 【JS】js给对象动态添加、设置、删除属性名和属性值

    js中访问对象属性一共有两种方法:点获取法和方括号获取法。 使用点符号访问属性值 alert( user.name ); // John 使用方括号访问属性值 alert( user[name]); // John 注意: 如果我们遍历一个对象,我们获取属性的顺序是和属性添加时的顺序相同吗? 简短的回答是:“有特别的顺序”:整

    2023年04月13日
    浏览(49)
  • 微信小程序js如何动态设置css

    微信小程序中可以使用setData()方法动态设置CSS样式。 例如,我们可以在wxml文件中定义一个样式类: ``` view class=\\\"my-class\\\"Hello World/view ``` 然后在js文件中使用setData()方法动态设置该样式类的CSS样式: ``` Page({   data: {     myClassStyle: \\\'\\\'   },   onLoad: function () {     this.setData({    

    2024年02月09日
    浏览(41)
  • Vue.js uni-app 混合模式原生App webview与H5的交互

    在现代移动应用开发中,原生App与H5页面之间的交互已经成为一个常见的需求。本文将介绍如何在Vue.js框架中实现原生App与H5页面之间的数据传递和方法调用。我们将通过一个简单的示例来展示如何实现这一功能。 效果图如下: 首先,我们需要在Vue.js项目中引入原生App与H5页面

    2024年02月16日
    浏览(72)
  • uni-app的Vue.js实现微信小程序的紧急事件登记页面功能

    主要功能实现  完成发生时间选择功能,用户可以通过日期选择器选择事件发生的时间。 实现事件类型选择功能,用户可以通过下拉选择框选择事件的类型。 添加子养殖场编号输入框,用户可以输入与事件相关的子养殖场编号。 完成事件描述输入功能,用户可以通过文本输

    2024年02月12日
    浏览(61)
  • uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建

            因为要完成软件工程的项目,要做一个nativeApp,看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章,似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入(可能这个

    2023年04月09日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包