没有键名的数组直接遍历到页面上，并根据索引添加键名

最新推荐文章于 2024-04-25 00:00:00 发布
最新推荐文章于 2024-04-25 00:00:00 发布
阅读量176 收藏
点赞数
分类专栏： JS Vuetify vue 文章标签： vuetify vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OnismYY/article/details/121673350
版权
JS 同时被 3 个专栏收录
23 篇文章 0 订阅
订阅专栏
vue
19 篇文章 0 订阅
订阅专栏
Vuetify
10 篇文章 1 订阅
订阅专栏
本文介绍如何在Vue中通过v-for指令遍历后端传递的enFerChValves数组，根据数组值判断通道A/B/C的启用状态。当值为1时，通道启用，图标着色；值为0则通道禁用，图标灰色。同时，通过索引添加键名，利用三元运算符根据索引0、1、2分别显示A、B、C肥的启用状态。最终实现动态展示通道启用情况的效果。
摘要由CSDN通过智能技术生成

后端传递过来的数组是enPhStrategy数组下面的enFerChValves数组，所以遍历的时候
in ecPhStrategy.enFerChValves，没有嵌套数组的情况下，直接in enFerChValves 就好

enFerChValves: [ 1, 0, 1 ],

使用v-for遍历数组enFerChValves，自行添加索引 “i”

通道 A/B/C肥是否启用， 根据传递过来的数组，判断里面的值，

  • 如果值是1，就表示启用，图标有颜色，
  • 如果值是0，就表示没有启用，图标为灰色

根据索引添加键名，使用三元表达式判断遍历后的索引

  • 如果索引为0，显示A肥，
  • 如果索引为1，显示B肥，
  • 如果索引为2，显示C肥
    在这里插入图片描述

最后效果
在这里插入图片描述

OnismYY
关注
专栏目录
Python和JavaScript的for循环遍历
旧人小表弟的博客 - 无业游民学习笔记
12-14 518
Python Python的for循环只有一个，一般指的是for in，而其他语言则分为for 和 for in两个 for i in [1,'a',2,'b',3]: print(i) dict = {'a':1,'b':'zs','c':'ls'} for i in dict: print(dict[i]) Python遍历序列的时候很方便，列表、元祖、字典表、集合、字符串都可以直接使用for循环来遍历 可以用for循环遍历的，都叫可迭代对象 JavaScript 临时变量i需
jQuery数组的遍历方式与常用方法
Those who achieve great thing do not stick to trifles
01-31 1006
jQuery数组的遍历方式与常用方法 一、数组的遍历方式 1、JS中我们可以通过for循环的方式实现数组的遍历 2、JQ中有两种遍历数组的方式,如下： 方式一： $("xx").each(f...
JS 添加数组元素（ 4种方法 ）
最新发布
大剑师兰特的GIS世界
04-25 1万+
ush() 和 unshift() 方法会直接修改原数组。 splice() 方法同样会直接修改原数组，但它还可以用来同时删除和插入元素。 concat()方法不会改变原数组，而是返回一个新的数组。
Vue：获取v-for循环中的数组下标、索引及数据
甜鲸鱼的博客
12-05 7067
在Vue中使用v-for取出排行榜数据，并根据排行榜的分类显示对应的排行榜内容。
编程题：遍历数组每一项，生成新数组
认真和努力总没有错
10-14 2371
遍历数组每一项，生成新数组 var arr = [[1, 2, 3],[[[[[[11]]]]]], [4, [5]], [6, [7, 8, 9,[10]]]]; 得到 brr： [1, 2, 3, 4, 6,5, 7, 8, 9, 10,11] //把arr的每个数值存放到新的数组brr里； var arr = [[1, 2, 3],[[[[[[11]]]]]], [4, [5]], [6,...
js提取数组中的某个属性组成一个新数组
fightnow1的博客
08-12 9215
js提取数组中某一属性形成新数组
JQuery遍历json数组的3种方法
10-25
for...in循环用于遍历数组的索引或对象的属性名（键名）。但需要注意，for...in循环会遍历对象的所有可枚举属性，包括原型链上的属性，因此在遍历数组时应当先检查属性是否为自有属性。 - for...of循环 for...of...
vue两个数组合并，将带有图片的数组加入到数据数组中，带有图片的数组没有字段名，需要加上字段名再通过循环遍历渲染到页面上
07-15
如果带有图片的数组没有字段名，你可以...这样就可以将带有图片的数组合并到数据数组中，并通过循环遍历在页面上渲染出来。请确保 `imageArray` 的元素与 `data` 数组的项一一对应，以便正确地合并图片路径到每个项中。
vue两个数组合并，将带有图片的数组加入到数据数组中，带有图片的数组没有字段名，需要加上字段名再通过循环遍历渲染到页面上，同时打印出合并后的数组
07-15
要将带有图片的数组合并到数据数组中，并通过循环遍历渲染到页面上，你可以将带有图片的数组中的元素添加字段名后，使用`Array.map()`方法将其与数据数组的元素合并。以下是一个示例： ```javascript ...
数组循环后页面没有渲染_解决vue数组中对象属性变化页面不渲染问题
weixin_39683241的博客
12-19 852
做checkbox多选功能的时候遇到了一个坑，逻辑怎么看都对，但是就是有bug，最后发现数组那里值变了页面勾选没有重新渲染。换了关键词搜索找到了相关方法。其实之前读文档教程的时候看到过这里，但是只有真的使用之后才会有最直接的感触。数组更新检测变异方法Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：push()pop()shift()unshift()splice()s...
无key值的json数组解析
jiaonizuoren的博客
05-11 4318
当字符串str为以下json对象时，想要获取key为city中的第一个数据beijing的时候， { "type": 1, "city": [ "beijing","shanghai","guangzhou"] } 首先需要通过getJSONArray方法获取到json数组city，然后再用getString(0)即可获取到第一个参数beijing，同理，获取shanghai...
数组的遍历方式（齐全）
weixin_44736637的博客
12-20 8306
数组（遍历数组）Array 案例： arr1=[1,2,3] arr2=[3,4,5] arr3=[arr1,arr2] log(arr3[0][2]) //输出为 arr1 的 3 一：数组的概念 之前 变量只能存一个值 如果我们想存多个值呢？ 这就涉及到数组了 数组可以把一组数据有序的全部一起存起来 ，并且提供方便的访问（获取）方式 概念：数组是指一组数据的集合，每个数据被称为元素 在数组中可以任意存放任意类型的元素！并且是一组数据储存在单个变量中的优雅方式 var arr ={1、2、3、4、
javascript ES5中 foreach()遍历方法
weixin_44638167的博客
09-28 5928
forcach() array.forEach(function(currentValue, index, arr)) currentValue：数组当前项的值 index：数组当前项的索引 (可选) arr：数组对象本身 filter() 方法创建一个新的数组， 新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组 注意它直接返回一个新数组 代码: <script> var arr=[50,86,12,10,0,38]; var newa
60 无键值Json数组和有键值json数组实验
Chasing_Chasing的博客
12-03 1750
1.引言 特殊的key值的json数组今天遇到了，所以研究了会才知道怎么生成和解析这种无键值的json数组。下面我们来看看今天的实验。 2.json生成数组实验 今天的实验就是生成这样的无key值的json数组，在这里称为数组1。 { "scanPrefix": [ "hello", "hello", "hello", "hello", "hello" ] } ...
给数组里面的每一个对象添加一个新的键值对（id序号）
qq_51196135的博客
01-13 6859
1、背景： 由于在一些项目中,后端返回来的数据里面缺少了前端页面中需要的一些数据，此时需要前端手动添加新数据。 2、举例： 上图可以看出，由于后端返回的 数据里面没有id这一项内容，造成页面数据不完整，所以需要前端在现有的数据里添加需要的新数据。 3、代码： //将请求回来的数据（data.auto_list）赋值给data里面定义的变量（tableData） this.tableData = data.auto_list //将（tableData）循环遍历每一项item，然后给每一项添
网页中引用下载好的字体文件（.ttf）
OnismYY的博客
02-18 4187
将下载好的文件放到目录文件夹下 &amp;amp;lt;style&amp;amp;gt; @font-face { font-family: &amp;quot;fz&amp;quot;; src: url(&amp;quot;../assets/DS-DIGI.ttf&amp;quot;); } &amp;amp;lt;/style&amp;amp;gt; 引用 &amp;amp;lt;span styl
vuedraggable拖拽组件布局一个列表上下左右拖动
OnismYY的博客
10-15 1439
官方文档的例子默认都是一条信息占用一行位置，只能上下拖动， 想要实现一个列表的上下左右拖动，一行内有多条信息， 需要将默认的行内元素，转变为行内块元素，一条代码 div中绑定属性：style="{display:‘inline-block’} 未设置前 设置后 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值