Vue：循环数据上下及其中间增加横线（非表格）

最新推荐文章于 2021-12-21 20:42:56 发布
最新推荐文章于 2021-12-21 20:42:56 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45648000/article/details/115979785
版权

目标：如下，要做到对一下权限的上下两行和中间都要增加分割线，显然是所有行增加底部线，并判断当前行是不是第一行，若是第一行增加一个css
在这里插入图片描述

示例代码

如下class均有bdbottom样式，并判断当前行的id是否为0，若为0则增加bdtop的css样式

html代码

<el-row :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for="(it
最低0.47元/天 解锁文章
小小的产品经理
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中如何加入横线_vue
weixin_32688333的博客
12-29 1万+
一.模板语法：允许开发者把DOM绑定在最底层Vue实例上。在底层实现上，Vue会将模板编译成虚拟DOM渲染函数，Vue可以计算出最少需要重新渲染多少组件，并减少DOM操作。1.插值#文本数据绑定最常见的就是Mustache语法(双大括号){{msg}}的文本插值。你也可以用v-once指令来定义一次性插值，数据改变插值处的内容也不会改变，但是请注意，这会影响到该节点的其他插值。//html ...
vue中如何加入横线_玩转Vue的8个小技巧，一看就会
weixin_31720227的博客
02-05 3572
废话不多说，直接分享咯！1.始终在 `v-for` 中使用 `:key`在需要操纵数据时，将key属性与v-for指令一起使用可以让程序保持恒定且可预测是很有必要的。这样Vue就可以跟踪组件状态，并对不同的元素有一个常量引用。在使用动画或Vue转换时，如果没有key ，Vue只会尝试使DOM尽可能高效。这或许会导致v-for中的元素出现乱序，或行为难以预测。如果我们对每个元素都有唯一的键引用，就能...
一条横向的时间线
12-12
一条横向的时间线。
router中获取vuex_如何优雅的在 Vue 中添加权限控制
weixin_39723248的博客
11-20 356
前言在一个项目中，一些功能会涉及到重要的数据管理，为了确保数据的安全，我们会在项目中加入权限来限制每个用户的操作。作为前端，我们要做的是配合后端给到的权限数据，做页面上的各种各样的限制。需求因为这是一个工作上的业务需求，所以对于我来说主要有两个地方需要进行权限控制。第一个是侧边菜单栏，需要控制显示与隐藏。第二个就是页面内的各个按钮，弹窗等。流程如何获取用户权限？后端（当前用户拥有的权限列表）-&g...
vue 循环加载数据并获取第一条记录的方法
10-17
今天小编就为大家分享一篇vue 循环加载数据并获取第一条记录的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
实例分析vue循环列表动态数据的处理方法
01-19
调用方法：Vue.set( target, key, value ) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 value ：重新赋的值 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> &...
vue基础之data存储数据及v-for循环用法示例
12-11
本文实例讲述了vue data存储数据及v-for循环用法。分享给大家供大家参考，具体如下： vue data里面存储数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
Vue实现表格中对数据进行转换、处理的方法
10-18
主要介绍了Vue实现表格中对数据进行转换、处理的方法,需要的朋友可以参考下
vue改变循环遍历后的数据实例
10-16
今天小编就为大家分享一篇vue改变循环遍历后的数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue v-for遍历生成菜单、导航栏时添加分割线/横线
白~狼的博客
11-25 3268
vue v-for 遍历导航、菜单中间添加分割线的解决方法 解决思路：在遍历的div中添加一个横线div，通过v-if（可辅以index）判断该横线是否显示。 <style> /* 选项卡片样式 */ .button { width: 200px; height: 50px; text-align: center; background-color: rgb(130, 183, 230); margin: 10px; } .button:ho
html中一条横线代码怎么写_Vue VS React 在开发同一记账项目中二者的对比
weixin_39704314的博客
11-21 252
Vue VS React 在开发同一记账项目两者的对比目录1.项目介绍2.Vue VS React 数据绑定3.Vue VS React 组件化4.Vue VS React 外部数据Props5.Vue VS React CSS支持6.Vue VS React 全局状态管理7.Vue VS React 路由Router8.Vue VS React 总结1.项目介绍柠檬记账是一个移动端的本地记账项目...
vue中如何加入横线_Vue+TypeScript中如何处理computed
weixin_33436232的博客
12-28 307
什么是「computed」「computed」是Vue中提供的一个计算属性。它被混入到Vue实例中，所有的getter和setter的this上下文自动的绑定为Vue实例。计算属性的结果会被缓存，除非依赖的响应式property变化才会重新计算。「computed」的用途我们可以使用「computed」对已有的属性数据进行加工处理，得到我们的目标数据。在TypeScript怎么用在「vue-cla...
实现每四位字符添加一个短横线（考虑用户删除、复制粘贴输入的情况）
wl516372370的博客
12-26 1181
比想象中简单很多，刚开始不知道这个方法的时候，纯粹用字符串拼接，条件太多，用下面这个方法就简单很多，此方法可以用在诸多类似需求中，上代码： 在vue中可以用watch，其他也可以使用input事件进行触发 <input type="text" @input="changeStr"> function changeStr () { val = val || ''; //如果用户输入了-，需要去除-【全局替换】 val = val.replace(/-/g, ''); //match
VUE基础知识
weixin_45989924的博客
05-18 172
VUE基础知识 学习之前实现一个简单的vue dome <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
vue+elementui 实现每行两列循环
bossjing的博客
05-20 4920
el-row el-col不能实现的布局：一个多行多列并且移动端适配，每行用分隔线隔开的布局
weixin_41458007的博客
09-26 1456
el-row el-col不能实现的布局：一个多行多列并且移动端适配，每行用分隔线隔开的布局 采用display:grid;grid-template-columns: repeat(3,1fr);实现 解决办法：父元素用display:grid布局 .card-grids{ font-size: 35rpx; font-weight: 500; background: #fff; display: grid; margin-top: 10rpx; grid-template-columns: repe
分享vue+elementui 采用el-row布局 小坑
weixin_43933259的博客
09-03 3279
分享vue+elementui 采用el-row布局 小坑 问题：24份布局，分4个输入框，出现文字与输入框各在一行的样式bug。 解决：在el-form-item 标签写入的label 属性“：”改为英文状态下“:”.
el-row el-col循环之后排序
Anony_me的博客
12-21 2329
之前一直把循环体加入到el-row中，循环出来的结果一直是纵向循环，右边那两个的数据没有循环到，以下就是我错误的示范： 正确的方式应该放在每个要执行的el-col中，这样执行出来的结果才会是你要循环遍历的数组，是横向显示的方式，正确示范： ...
vue表格中循环不同数据
最新发布
03-09
可以使用 v-for 指令来循环不同的数据，例如： <template> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr v-for="(item, index) in dataList" :key="index"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.gender }}</td> </tr> </tbody> </table> </template> <script> export default { data() { return { dataList: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }, ], }; }, }; </script>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值