js 对象循环绑定新属性，foreach

于 2024-07-24 16:25:35 发布
阅读量314 收藏
点赞数 2
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/spitfire_dinosau/article/details/140666489
版权 
   watch:{
		'data'(oval,nlva){
			this.title = this.data.area3.title
			this.Item = this.data.area3
			Object.keys(this.Item).forEach((key,index) => {
			  // key 是对象的属性名，this.Item[key] 是对应的属性值,index是对应下标
			  console.log(key, this.Item[key],index);
			  if(key != 'title'){
				  this.Item[key].color = this.color[index-1]
			  }
			  
			});
		}
	},
    onLoad(query) {},
    created(){

    },
    computed:{

    },
    data(){
      return{
		title:'',
		Item:{},
		color: ['#387EFF', '#FFC800', '#B3A0FF', '#2BD9C5', '#54C6FF'],
      }

对象，不能直接使用forEach，所以需要先通过Object。keys进行转换

以上是为Item添加color属性操作步骤

SpitFire_Dinosaur
关注
数组的迭代数组里面每个对象添加属性值_JS数组和对象循环遍历的几种实现方式...
weixin_34966468的博客
01-29 1901
数组遍历1. 普通for循环let arr = [1,2,3,4,5] for (let i = 0; i < arr.length; i++) { console.log(arr[i]) } // 输出结果 // 1 // 2 // 3 // 4 // 5 2. 优化普通for循环let arr = [1,2,3,4,5] for(var j = 0,len = arr.lengt...
js 实现 JavaScript遍历对象中的所有属性
03-30
js 实现 JavaScript遍历对象中的所有属性! 值得下载看看!资源免费,大家分享!!
JS动态给对象添加属性和值的实现方法
11-29
如下所示： var obj={}; for(var i=0;i<10;i++){ eval("obj.p"+i+"="+i); } 以上就是小编为大家带来的JS动态给对象添加属性和值的实现方法全部内容了，希望大家多多支持软件开发网~
JS实现给对象动态添加属性的方法
10-20
主要介绍了JS实现给对象动态添加属性的方法,涉及JS属性的遍历、动态赋值及eval方法的简单使用技巧,需要的朋友可以参考下
js给数组每个对象添加属性
qq_38122757的博客
02-29 1607
js给数组每个对象添加属性
js 循环为对象添加属性及属性值
weixin_45897915的博客
10-13 4029
for(var i=0;i<val.length;i++){ value[`dis${i}`]=val[i] }
08.02、js之对象属性-for...in 循环&添加&delete
weixin_44867717的博客
04-02 1571
JavaScript 对象属性 在 JavaScript 中，所有属性都是可读的，但是只有值是可修改的（只有当属性为可写时）。 1、for…in 循环 JavaScript for…in 语句遍历对象的属性。 语法 for (variable in object) { 要执行的代码 } for…in 循环中的代码块会为每个属性执行一次。 循环对象的属性： 实例 var person = {fname:"Bill", lname:"Gates", age:62}; for (x in perso
关于js 空对象如何在 if循环追加属性的方法
m0_72189548的博客
11-01 262
【代码】关于js 空对象如何在 if循环追加属性的方法。
深入理解JQuery循环绑定事件
10-22
在深入探讨jQuery循环绑定事件之前，我们需要了解jQuery是什么。jQuery是一个快速、小巧、功能丰富的JavaScript库，它通过一个统一的API简化了HTML文档遍历、事件处理、动画和Ajax交互。使用jQuery，开发者可以编写...
MongoDB数据库forEach循环遍历用法
09-10
在这个例子中，`ShowResults` 函数会在遍历 `letters` 数组时被调用，`this` 关键字根据传递的 `scope` 参数被绑定到 `scope` 对象。 总的来说，`forEach` 循环在 MongoDB 中是处理数据流的重要工具，尤其在你需要...
angular.foreach 循环方法使用指南
12-01
`angular.forEach`方法的主要功能是遍历数组或对象，执行指定的函数对每个元素或属性进行操作。其基本语法如下： ```javascript angular.forEach(collection, iterator, [context]); ``` 这里的参数含义如下： - `...
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
10-21
在 KnockoutJS 中，foreach 绑定后面跟的是要循环的监控属性数组名称，而 foreach 内部则可以引用数组项目中的具体属性。例如，在遍历人员列表时，可以使用 firstName 和 lastName 这样的属性来显示每个人的信息。 ...
vue 使用forEach循环遍历数组后，添加新的对象视图不刷新
Emily_Susu的博客
12-17 3571
由于Vue属于MVVM框架，数据双向绑定视图，对data对象中的数据进行监听，当监测到数据改变时，相应数据所影响的页面也会触发更新。因此我们所需的这些响应式数据，受到JavaScript的限制，vue不能监测到对象属性的添加和删除，因为Vue利用的是Object的defineProperty()方法，在初始化实例时将属性转为getter/setter,所以属性必须在data对象上才能被vue转换。...
js中如何遍历对象属性
热门推荐
zhao_xinhu的博客
09-20 1万+
对象声明： 1、var obj = {}//字面量，建议这种方式(方便初始化赋值) 2、var obj = new Object(); 对象赋值： 1、obj.name = "zhangsan";obj.age = 20; 2、obj["name"] = "zhangsan";obj["age"] = 20;(建议这种方式) 访问对象属性值： 1、obj.name    2、obj...
JavaScript向数组里面的对象添加新的属性
weixin_43321726的博客
07-26 257
let filterName = this.filterByName(this.data.industryData, this.data.array[e.detail.value]); let arry = []; filterName.children.map((item,index)=>{ arry.push(Object.assign({},item,{check:false})) }) console.log("赛选后的数据:", arry
js 给数组对象添加多个属性
最新发布
Z18834071903的博客
06-03 460
js 给数组对象添加多个属性
js往符合条件的数组对象中加入新属性
博客of me
05-03 575
第一步：过滤出18岁以下的数据，并加入job属性。第二步：用reduce()方法去重。第二步：或者用Set()方法去重。最终得到新数组mergedArr。
三个按钮循环绑定点击事件，控制另外三个盒子的显示隐藏
04-25
很好的问题，可以通过以下的代码实现： ```html <!-- HTML部分 --> <button class="btn" data-target="box1">按钮1</button> <button class="btn" data-target="box2">按钮2</button> <button class="btn" data-target="box3">按钮3</button> <div class="box" id="box1">盒子1</div> <div class="box" id="box2">盒子2</div> <div class="box" id="box3">盒子3</div> ``` ```javascript // JS部分 const buttons = document.querySelectorAll('.btn'); const boxes = document.querySelectorAll('.box'); buttons.forEach(button => { button.addEventListener('click', function() { const target = this.dataset.target; boxes.forEach(box => { if (box.getAttribute('id') === target) { box.style.display = 'block'; } else { box.style.display = 'none'; } }); }); }); ``` 上面的代码中，我们首先通过 `querySelectorAll` 方法获取了所有的按钮和盒子，并且通过 `forEach` 方法对每一个按钮添加了点击事件。当按钮被点击时，我们获取其 `data-target` 属性的值，并且通过 `forEach` 方法遍历所有盒子，如果盒子的 `id` 等于目标值，则将其显示，否则隐藏。这样，点击按钮就可以控制对应的盒子的显示和隐藏了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值