vue用v-for循环之后布局样式错乱的问题

已于 2023-03-20 14:06:36 修改
阅读量471 收藏
点赞数
文章标签： javascript vue.js 前端 Powered by 金山文档
于 2023-03-16 08:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_68155756/article/details/129549588
版权

先描述一下我出现问题的场景，用v-for循环表格的每一项，表格与元素距离随着循环次数增间隙变大的问题

上边是有一次循环的距离

下边是有多次循环的距离

距离明显增加，经过一番调试之后，发现是因为之前需求要用表格0.5的线做，所以用transform:scale(0.5)缩放方法实现的，但是缩放不脱离文档流，还是占原来高度的大小，所以看起来距离增加了

去掉缩放属性距离恢复正常

钱端工程师
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【vue】v-for循环样式乱
SZnAl的博客
03-02 999
vue中，使用v-for进行后端数据向前台渲染时，排好的版面错乱 原因：在li上使用v-for，而非ul <ul> <li v-for="(v,i) in data" :key="i"> <img src="../../assets/everyday1.jpg" alt="" /> <p>{{v.title}}</p> <p>{{v.price}}</p> </li&
vue中v-for（列表渲染）的使用方法及注意，v-for的key属性的歧义
weixin_52099241的博客
07-14 4199
当要对一组数据进行渲染时，我们可以用v-for来完成 v-for遍历数组 格式：v-for="(item, index) in items"。 说明：index为可选参数，是索引值，当不需要得到每一项的索引值时，可以省略index 也可以用{{index+1}}之类的加减法得到类似于排名一样的效果 这里的item和index都是形参，而items是数组的名，数组的名字是必须和后面data数据里的数组名对应的，你也可以写(a，b) in items......
vue3通过v-for循环多次子组件，改变组件的个数，组件相互干扰
Xiao022353的博客
04-27 1355
我们一般v-for组件完后都是使用index来作为key的 但是，当我删除第一个组件的时候key为0，数组的第二个组件的key也会变成0，所以，因为key的赋值，导致数组的删除出现了data的值的混淆,我们只需要把 key 的值换一个item.XX就好了 不要用index 就行。
vue中在DOM中使用v-for数据渲染混乱问题及解决方法
m0_56390097的博客
02-07 1351
有些时候，当使用v-for渲染数据时，使用了作为条件编译，在浏览器上渲染呈现的内容顺序将会和所渲染的数组顺序不一样。解决方法，避免在v-for中使用div作为v-if判断标签。
vue循环遍历对象出现乱序问题
最新发布
qq_43378083的博客
05-21 296
问题描述：后端传回对象格式的数据，v-for直接循环显示，出现乱序问题。直接用map循环处理数据，发现还是乱序
【VUE】v-for循环样式乱
SZnAl的博客
03-03 530
vue中，使用v-for进行后端数据向前台渲染时，排好的版面错乱 原因：在li上使用v-for，而非ul <ul> <li v-for="(v,i) in data" :key="i"> <img src="../../assets/everyday1.jpg" alt="" /> <p>{{v.title}}</p> <p>{{v.price}}</p> </li&
vue v-for实现多行等分布局-三等分
A873054267的博客
08-16 7602
关键在于容器元素的指定和项目元素。 容器元素要在for之外，项目元素在for之内 <div class="wrapper"> <div class="wrapper-content" v-for="(resultListitem,resultListindex) in resultList"> <barchart titles="项目规划名称1" sta...
vue父组件通过v-for循环多次调用同一个子组件，改变被循环数组个数，各子组件显示数据混乱
deciduous_leaves的博客
03-10 8288
场景是这样的，动态添加子组件，在父组件中循环显示，可以随时增加活删除子组件 <div class="itemTemplate" v-for="(item,index) in templateList" :key="index"> <Icon type="ios-close-circle-outline" size="32" @click="deleteTem(index)"/> <child :data="childData[index]" /> &l
vue2.0 可折叠列表 v-for循环展示的实例
10-18
在这个实例中，我们将探讨如何使用`v-for`循环来遍历数据并展示列表，以及如何通过点击事件控制列表的展开和折叠。下面我们将详细分析这个实例中的关键点。 1. **`v-for`循环**： `v-for`是Vue中的一个指令，用于...
vue-image-crop基于Vue的移动端图片裁剪组件示例
10-18
通过 `v-for` 指令，可以在列表中循环渲染多个图片裁剪组件，并且每个组件都可以有自己的 `removeHandle` 回调，以便在用户点击移除按钮时更新列表。 总之，`vue-image-crop` 提供了一种便捷的方式来在 Vue.js 应用...
vue+element-ui动态生成多级表头的方法
10-18
`el-table-column`组件用于渲染表头，`v-for`循环遍历每一级的表头，并通过`:label`、`:prop`等属性设置表头的显示文本和数据绑定。 `tabledata01`是表格的数据源，用于填充表格的实际内容。`:span-method`属性可能...
vue+uni-app轮播图.zip
03-29
可以使用v-for循环遍历数据，生成相应的指示器元素，通过CSS实现样式定制。 3. 自动切换：通过设置定时器实现轮播图的自动切换，利用Vue的生命周期钩子函数如`mounted`或`updated`来启动定时器。 4. 滑动事件：...
hiprint for Vue2/Vue3 打印、打印设计、可视化设计器、报表设计、元素编辑、可视化打印编辑
06-01
本篇文章将深入探讨“hiprint for Vue2/Vue3”，这是一个专为Vue.js设计的扩展组件，旨在提供打印、打印设计、可视化设计器、报表设计、元素编辑以及可视化打印编辑等功能。 首先，我们要理解hiprint的核心功能。它...
VUE中如何给v-for循环出来的元素设置不同的样式
HelloWord176的博客
10-14 3768
效果图： 1. 我们可以给要循环的盒子动态绑定class名 并且传入一个数组 <div class="AllPeople" v-for="(item , index) in rankingData" :key="index" :class="sstt[index]"> <div class="inner"> <span class="innerContent">TOP1告警区域 {{item.area}}<.
html盒子在始终在左侧,DIV+CSS网页盒子错位的原因是什么？
weixin_39805355的博客
06-02 843
常常我们会遇到我们要设置在一行显示的布局，却因为种种原因造成了错位，看到结果是在一行的最后一个盒子布局错位掉下去了(如下图)。错位一 3错位掉落与1和2下方错位二 网页布局错位示范造成DIV CSS网页布局错位的原因大概有两种情况，一种是宽度计算错误，一种是IE BUG造成，特别是IE6和IE7。接下来我们挨着为大家介绍错位与解决错位方法。一、宽度计算错误宽度计算错误，假如总宽度为500px，有3...
vue 动态数据 双层循环数据 点击事件错位
小哈力----一个小前端工程师
10-23 511
内层循环的key使用id，而不是index。此时的index无法区分开数据。点击id为1 的ItemA 却跳转到id为2的itemB。
Vue的部分指令系统以及 数据变化后页面不重新渲染的解决方法
qq_41977071的博客
12-15 1249
Vue的指令系统前言一、列表循环二、表单元素双向数据绑定1设计模式：也就是网站的开发模式(1)文本框(2)文本域(3)复选框(4)单选框(5)下拉菜单三、数据变化后，页面不重新渲染总结 前言 本文介绍了vue的部分基本指令，想了解更多基本指令，请阅读上篇文章。 ps：由于这是小编第二次创作，有很多不足的之处，希望各位大神海涵，欢迎各位大神在评论区补充 。 一、列表循环 1、遍历数组 < v-for=“每次要遍历的元素 in/of 数据源”> 或者可以写成 < v-
vue项目 接口中对获取到的数据进行双重for循环导致页面不渲染
xiaoyugan000的博客
05-12 1916
今天跟朋友解决一个vue项目中的问题，大概意思是： 前端向后端发送接口请求，请求成功之后，后端返回了一个数组，数组中包含了上百条数据。而我们需要做得是将这上百条数据以每组20条的形式渲染到页面上。 我和朋友的解决办法是： 定义一个空数组，这个空数组里面的元素也是空数组，然后循环返回的包含了上百条数据的数组，将前20条数据放进第一个为空数组的元素中，然后利用splice将原数组的前20条数据删除，跳出循环。以下为代码： getSell(){ topicList({需要传的数据}).then(
（三）：Vue3的v-for和v-if一起用的变化
热门推荐
qq_45279574的博客
05-13 1万+
1.作用： v-if指令 作为一个条件渲染，当他为true的时候才会渲染出当前的节点 v-for指令 是基于一个数组来渲染列表 ，v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名 在v-for的时候都会被要求设置Key值，而且每一个Key值都是独一无二的。 2.优先级 Vue2中v-for和v-if是可以一起用的 因为v-for的优先级比v-if的高 <div v-for="item in
vue methods for循环
04-24
在Vue中，可以使用`v-for`指令来进行循环渲染。而在methods中，我们可以定义一些方法来处理循环中的逻辑操作。下面是一个示例： ```html <template> <div> <ul> <li v-for="item in items" :key="item.id"> {{ item.name }} <button @click="deleteItem(item.id)">删除</button> </li> </ul> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' } ] }; }, methods: { deleteItem(itemId) { // 根据itemId删除对应的item // ... } } }; </script> ``` 在上面的示例中，我们使用`v-for`指令循环渲染了一个包含多个列表项的`ul`元素。每个列表项都有一个删除按钮，点击按钮时会调用`deleteItem`方法，并传入对应的`itemId`参数。在`deleteItem`方法中，我们可以根据`itemId`来删除对应的列表项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值