vue v-for遍历动态展示元素数量

最新推荐文章于 2024-07-17 17:46:23 发布
最新推荐文章于 2024-07-17 17:46:23 发布
阅读量5.3k 收藏 1
点赞数
分类专栏： Vue 文章标签： vue v-for
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angl129/article/details/90610365
版权
本文介绍了如何在Vue中使用v-for指令根据返回结果类型动态显示不同类型的元素，如文本框、数字框、选项等。通过示例展示了如何结合属性(list)中的name、type和默认值来实现这一功能，利用JSON.stringify和JSON.parse处理数据。
摘要由CSDN通过智能技术生成

                                         vue v-for遍历动态展示元素数量

       最近研究了下vue，想实现一个功能，通过返回结果类型（列表）动态展示多个元素（可以是：文本框、数字框、选项等）。具体的实现如下：

一、实例

1、html

property(list) ,包含字段：[{"fildna":"1","fildtp":"1", "fildva": ""}]

fildna : name

fildtp: type

fildva： 默认值

<div>
    <div v-for="(item, i) in this.property" :key="item.fildna" style="margin-top: 20px">
      <div v-if="item.fildtp === '1'">
        <label style="width: 120px; display: inline-block">{
  {item.fildna}} : </label>
        <el-input v-model="item.fildva" type="text" style="width: 500px; height: 30px;"></el-input>
      </div>
最低0.47元/天 解锁文章
j--j
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE table 每行5个算法，不足5个也补齐
LinJie0925的博客
07-03 901
VUE table 每行5个算法，不足5个也补齐思路1、计算出需要的行数tr_num2、循环遍历,只取当前行tr_num的td3、 当trNum是最后一行并且不是最后一个,计算剩余空位数，循环填补直接上代码来源 思路 1、计算出需要的行数tr_num 2、循环遍历,只取当前行tr_num的td 3、 当trNum是最后一行并且不是最后一个,计算剩余空位数，循环填补 直接上代码 <table class="tb1"> <tr> <td colspan="5" style=
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
10-18
主要介绍了关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),需要的朋友可以参考下
vue for循环 一行放5个数据 外层使用flex布局
Abenazhan的博客
02-05 4074
html： <template v-for="(item, i) in aa" > <div style="width:100%;display: flex;justify-content: flex-start;align-items: center;" v-if="i%5==0" > <div style="width: 19%;display: flex;justify-content: flex-start;align-items: base
如果你要从一个接口获取 A 和 B 的数据，并根据获取到的数据展示不同的内容，你可以在 Vue 组件中实现如下：
最新发布
m0_67841039的博客
07-17 371
为你实际的接口地址，并根据实际返回的数据结构调整代码。
element跑马灯 v-for循环数据控制显示个数（复制即用）
m0_73199810的博客
11-07 173
vue v-for循环显示前N个
galaxyJING的博客
12-27 580
【代码】vue v-for循环显示前N个。
C语言强化学习第二天（单链表）
lv958084514的博客
11-14 191
英文： next:下一个 prev:上一个 list：链表 head：头 tail:尾 node：节点 回顾： 1.文件操作库函数 fopen/fclose/fread/fwrite/rewind/fseek 2.结构体数组 3.结构体和函数指针配合 4.Makefile提升： 4.1.伪目标：没有依赖的目标 例如：clean: rm helloworld helloworld.o 当执行make clean时执行对应的命令 4.2.Makefile的变量 Makefile的变量类似C语言的#define宏
vue v-for直接循环数字实例
10-16
在Vue中，`v-for` 指令是用于遍历数组、对象或数字的工具，使得我们可以轻松地渲染列表或者进行重复操作。在这个实例中，我们将详细探讨如何使用 `v-for` 直接循环数字。 在Vue中，`v-for` 的基本语法是这样的： `...
Vue中控制v-for循环次数的实现方法
10-17
在Vue.js框架中，v-for是一个强大的指令，它允许开发者遍历数组或对象，并在页面上渲染相应数量的元素。但是，在某些情况下，我们可能需要限制v-for循环的次数，而不是遍历整个数组。这篇文章将详细探讨如何在Vue中...
Vue中v-for的数据分组实例
11-28
这个函数通过遍历`list`数组，使用`parseInt(i / sectionCount)`来计算当前元素所属的组别，其中`sectionCount`表示每组的元素数量（在这个例子中为3）。然后，将元素添加到对应的子数组`arrTemp[index]`中。 完成...
Vue 常用指令 v-for 标签循环展示数据
小楼一夜听春雨，深巷明朝卖杏花
07-27 3418
如果数组的每一项不是数字，而是对象或者其他复杂的类型，那么item代表这个对象，要获取内部的值要结合.语法。v-for还有个特点，比如数组的长度发生变化了，比如添加了或者删除了，那么生成的列表也会发生改变。item的值是可以使用的，item的值可以结合其他指令，比如使用v-bind和v-on指令。v-for指令的作用是将作为模板的那个标签，还有内部的内容，根据循环的次数拷贝若干份。至于是什么样的列表，就看你指令使用的位置了，列表的生成依赖于数据，所以先去定义数据。item和index都是可以修改其名称的。
url上接收到 el表达式 不渲染_【图文并茂，点赞收藏哦！】重学巩固你的Vuejs知识体系（上）...
weixin_39820910的博客
11-20 184
前沿置身世外只为暗中观察！！！Hello大家好，我是魔王哪吒！重学巩固你的Vuejs知识体系，如果有哪些知识点遗漏，还望在评论中说明，让我可以及时更新本篇内容知识体系。欢迎点赞收藏！谈谈你对MVC、MVP和MVVM的理解？https://github.com/webVueBlog/interview-answe/issues/156转角遇到Vuejs你为啥学习Vuejs前端开发的复杂化V...
【vue】指定v-for循环显示前3个
weixin_45319500的博客
01-13 6014
<div class="i-column" v-for="(item, index) in commodityList"> <div class="index_show_item" @click="turn('List')" v-show="index<3"> </div > </div >
v-for遍历每行展示两个
weixin_38673922的博客
08-18 2267
<van-row type="flex" justify="space-around" class="info_0" v-for="(item,index) in listTemp" :key="index"> <van-col span="6" class="info_4" v-for="(cell,i) in item" :key="i" > <span v-if="cell.s_CurrencyName">待缴官费金额({{cell.s_Curr...
在vue中通过后台的数据个数自动渲染前端l列表个数（axios+vux）
qq_34633111的博客
07-16 5787
1.通过axios获取后台数据。 submitForm () { return axios({ method: 'get', url: 'http://链接', withCredentials: true }) .then((response) =&gt; { return response.data }) ....
vue v-for 一行展示两个子项问题
add-oil的博客
09-27 1650
效果图： <template v-for="(it,i) in item.rh10list"> <tr v-if="i%2===0" :key="i" > <td> <span
Vue进阶（幺贰叁）：v-for 实现一行展示 n 个元素
IT全栈 华强工作室
06-03 8979
Vue进阶（幺贰叁）：v-for实现一行展示n个元素 需求背景 在开发前端项目过程中，遇到结果列表操作栏位需要每2个按钮元素为一行展示需求。 需求分析 可通过将返回值封装为二维数组，或者根据数组下标进行换行操作。 解决方案 经过实践，发现将返回值数组封装为二维数组，然后前端通过el-row,el-col标签封装实现。实现代码如下： <el-row v-for="(btnArr, index) in oprBtn" :key="index"> <el-col v-for="(btn, in
v-for循环出多个元素，如何单独选中目标元素
hmhmhm0319的博客
06-20 3626
我们经常使用vue中v-for进行元素的循环渲染，渲染之后需要添加单独的功能，这个时候就会遇到一些问题。 上述代码中，我循环渲染了多个div，并添加了鼠标移入和移出事件。但是，在触发事件（鼠标移入）后，会导致所有的div都产生变化（所有div都触发函数并变色），这与意图不符。于是，修改如下： 原理：设置一个动态的类（v-bind），利用三元表达式判断传入的index是否与当前元素的index相等，如果相等，则改变当前...
vue2v-for遍历对象
08-12
在Vue.js 2中，可以使用v-for指令来遍历对象的属性。v-for指令可以用于遍历数组和对象，并为每个项或属性执行相应的操作。 下面是一个示例，演示如何在Vue.js 2中遍历对象的属性： ```html <template> <div> <ul> <li v-for="(value, key) in myObject" :key="key"> {{ key }}: {{ value }} </li> </ul> </div> </template> <script> export default { data() { return { myObject: { name: 'John', age: 25, occupation: 'Developer' } }; } } </script> ``` 在上述示例中，我们使用v-for指令来遍历myObject对象的属性。在每次迭代时，v-for会将当前属性的值存储在`value`变量中，而属性名存储在`key`变量中。我们可以在模板中使用这些变量来显示每个属性的值。 注意，我们还使用`:key`绑定来为每个li元素提供唯一的标识符，以提高性能和避免警告。 这样，Vue.js将会根据myObject对象的属性数量动态生成对应的li元素，并显示每个属性的键和值。 总之，使用v-for指令可以在Vue.js 2中方便地遍历对象的属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值