v-for遍历时在遍历后的数据后面加上符号处理

最新推荐文章于 2024-03-31 12:16:31 发布
最新推荐文章于 2024-03-31 12:16:31 发布
阅读量600 收藏
点赞数
分类专栏： 前端学习 vue学习 文章标签： elementui 蓝桥杯 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41940856/article/details/123130862
版权 
<span v-for="(item1, index1) in list" :key="index1">
            <span >{{item}}</span>
            <span
              v-if="index1 != list.length - 1"
              :key="`${index1}_1`"
              >、</span
            >
          </span>

前端面试汇总-JavaScript
越陌度阡
06-19 1175
JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。其中 Symbol 和 BigInt 是ES6 中新增的数据类型：Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。
Redis——Scan原理与应用
庄小焱
03-31 4884
摘要 Redis是目前广为人知的一个内存数据库，在各个场景中都有着非常丰富的应用，前段时间Redis推出了6.0的版本，在新版本中采用了多线程模型。Redis 6.0 只有在网络请求的接收和解析，以及请求后的数据通过网络返回给时，使用了多线程。而数据读写操作还是由单线程来完成的（所以不存在数据安全问题） Redis为什么最开始被设计成单线程的？ Redis作为一个成熟的分布式缓存框架，它由很多个模块组成，如网络请求模块、索引模块、存储模块、高可用集群支撑模块、数据操作模块等。很多人说Redis是单线程
StringBuider 在什么条件下使用效率更高？
Java技术栈，分享最主流的Java技术
07-28 308
Java技术栈www.javastack.cn关注阅读更多优质文章引言都说 StringBuilder 在处理字符串拼接上效率要强于 String，但有时候我们的理解可能会存在一定的偏差...
vue循环数据最后一个不加/不加、
Khun_HWJ的博客
09-04 1860
<text v-for="(item, idx) in orderData.tags" :key="item.id"> <text>{{item}}{{idx === orderData.tags.length-1 ? " ":" / "}}</text> </text>
vue-1 目录 v-on v-for v-model等常见属性 事件修饰符
sharryling
03-23 291
cli 目录
Vue笔记：v-for
qq_43005779的博客
06-12 462
一、向数组中插入某元素 使用v-for来循环显示list中的项 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body&gt
vue字符串拼接的多种方法
花生日记
05-28 1万+
第二种方法：使用 for循环拼接字符串，这是最简单的一个方法，但是它并不适用于所有的情况，因为我们需要保证整个字符串都是可拼接的。例如：我们想要获取字符串长度，那么我们就可以使用以下方式进行拼接： 注意：上述方法不适用于以下两种情况： （1）需要多次拼接字符串，这是因为需要获取到整个字符串的长度，因此如果多次拼接的话，会导致性能变差。但是我们也不能忽略它的缺点，当我们想要拼接两个字符串时，for-in方法并不适用，因为我们需要先对字符串进行转换，再使用for-in方法来拼接。这样就能实现两个字符串的拼接。
直击高频编程考点：数学思维知识及经典算法题总结：
热门推荐
张彦峰的博客
05-12 168万+
数学思维考察练习（众数+快乐数+丑数+回文数+计数质数+有效数字+整数反转+罗马数字+平方根+超级次方+整数拆分+阶乘后的零+复数乘法+两数加法除法+最大公约数和最小公倍数+二进制中1的个数+从1到n整数中1出现的次数+求1+2+3+···+n数字之和等）
（涛菜菜）c++及数据结构及算法经典题目总结
okkkkkks的博客
03-31 818
假设链表中每一个节点的值都在 0 - 9 之间，那么链表整体就可以代表一个整数。给定两个这种链表，请生成代表两个整数相加值的结果链表。数据范围：0≤n,m≤10000000，链表任意值 0≤val≤9 要求：空间复杂度 O(n)，时间复杂度 O(n)具体做法： 二、反转链表 给定一个单链表的头结点pHead(该头节点是有值的，比如在下图，它的val是1)，长度为n，反转该链表后，返回新链表的表头。数据范围： 0≤n≤1000要求：空间复杂度 O(1) ，时间复杂度 O(n) 。方法一： vect
数据结构（C语言版）严蔚敏李冬梅（第2版）课后习题答案
sjltt的博客
12-21 8575
数据结构（C语言版）严蔚敏（第2版） 课后习题答案 李冬梅 2015.3 目 录 [第1章 绪论]{.underline} 1 [第2章 线性表]{.underline} 5 [第3章 栈和队列]{.underline} 13 [第4章 串、数组和广义表]{.underline} 26 [第5章 树和二叉树]{.underline} 33 [第6章 图]{.underline} 43 [第7章 查...
StringBuider 在什么条件下、如何使用效率更高？
MarkerHub的博客
08-21 252
小Hub领读：小小测试，StringBuilder是否效率真的高？作者；后青春期的 Keatshttps://www.cnblogs.com/keatsCoder/p/13212289....
vue中for循环使用角标
猿子
05-02 2775
<li v-for="(item, index) in rData"> <div>{{item}} {{index}}</div> </li>
四、vue3基础语法（三）
qq_37299479的博客
09-22 421
watch 多种用法 computed
vue v-for循环的用法
beidaol的专栏
01-06 3190
v-for的in后面可以放普通数组、对象数组、对象和数字 v-for循环的时候，key属性只能使用number或String。 key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值。 在组件中使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型 :key值。 1、v-for循环普通数组 ①...
在vue中给列表中的奇数行添加class
西风XF的博客
08-11 8035
在vue里给列表中的奇数行或者偶数行添加class
vue中的（ ？）和（？？）的用法
zlc516的博客
08-28 1万+
今天遇到一点小问题，查了查做个小记录，给大家分享一下，不对的地方还请大家多多指教。 storeValue (restitle) { document.title = restitle?.deptName this.title = restitle?.deptName this.tenantId = restitle?.tenantId } //this.title = restitle?.deptName 等价于 //this.title = restit
Vue中数组遍历/添加元素/更新/过滤/排序操作
sinat_38368658的博客
08-14 4017
文章目录1.遍历数组：v-for2.数组更新2.1 为数组添加一项3.过滤4.数组排序 1.遍历数组：v-for <div id="app"> <ul> <template v-for="(book,index) in books"> <li>{{index}}-{{book.name}}</li> </template> </ul> </div> &
js 或者vue中for循环去掉最后一个逗号
weixin_45869649的博客
10-14 3768
js 或者vue中for循环去掉最后一个逗号 一个感觉很简单的问题，刚开始我没有思路，现在也没有更好的思路 问题描述： 后端返回的一个数组，前端这边需要循环把名字展示，要求在展示时，每个名字后用** 、号分隔开，最后一个去掉 我在html中用v-for循环出来，然后用index判断是否最后一个，最后一个隐藏 、**号 修改前： html： <span v-for="(item, index) in materialDetailData.suppliers" :key="item.id"
循环出来的文字添加顿号 ‘、’，最后一个不用加
YingUser的博客
04-26 4021
有时候我们前端拿到后端返回来的数据是数组格式，然后需要循环出来，偏偏在最后一个字符串添加了句号，所以必须由我们前端去解决，（就离谱） 后端数据是这样的：偏偏加个句号 ['创作类', '艺术类', '教育', '咨询辅导类', '研究', '宗教', '保健', '技术等领域。'] 要的效果是这样的： 所以必须我们前端来加上了： <h1>偏好的职业领域</h1> <span v-for="(item, index) in tjDat
v-for数组遍历中间加逗号
最新发布
01-03
### Vue.js 中使用 `v-for` 遍历数组并添加逗号 为了实现遍历时在元素之间添加逗号的效果，可以采用多种方法。一种常见的方式是在模板内通过条件判断来决定是否添加逗号。 对于给定的场景——即在一个表格列中展示多个角色名称，并用逗号分隔这些名字： ```html <el-table :data="tableData" style="width: 100%"> <el-table-column label="所属角色" min-width="160" show-overflow-tooltip> <template slot-scope="scope"> <!-- 使用 span 标签包裹每一个 item --> <span v-for="(item, index) in scope.row.roleList" :key="index"> {{ scope.row.roleList.length - 1 !== index ? item.roleName + '，' : item.roleName }} </span> </template> </el-table-column> </el-table> ``` 上述代码片段展示了如何利用 `v-for` 来迭代 `roleList` 数组中的每一项，并且当不是最后一个项目时，在其后面加上中文逗号[^1]。 另一种更简洁的方法是直接处理数据本身而不是试图修改视图逻辑。可以在计算属性或方法里先将所有的 `roleName` 组合成一个字符串再绑定到页面上显示出来: ```javascript // 计算属性版本 computed: { formattedRoleNames() { return this.tableData.map(row => row.roleList.map(item => item.roleName).join('，')); } } ``` 这样做的好处是可以让 HTML 结构更加清晰简单，同时也更容易维护和测试。 最后还可以考虑使用 CSS 的 `::after` 伪类配合 JavaScript 或者纯样式解决方案来达到相同目的，但这通常不如前两种方式直观易懂。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值