位置: IT常识 - 正文

vue 在for循环中设置ref并获取$refs(vue for循环遍历对象取值)

编辑:rootadmin
vue 在for循环中设置ref并获取$refs 一、单循环动态设置ref

推荐整理分享vue 在for循环中设置ref并获取$refs(vue for循环遍历对象取值),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中for 循环key作用,vue v-for循环对象,vue的foreach循环,vue的foreach循环,vue 在for循环中怎么每4个一换行,vue的foreach循环,vue 在for循环中怎么每4个一换行,vue中for 循环key作用,内容如对您有帮助,希望把文章链接给更多的朋友!

1.设置:【:ref=“‘XXX’ + index”】XXX -->自定义ref的名字

vue 在for循环中设置ref并获取$refs(vue for循环遍历对象取值)

2.获取:let ref = eval(‘this.$refs.XXX’ + index)[0]

3.示例: 代码如下所示

<template> <div class="ref_test"> <div v-for="(item, index) in dataList" :key="index" :ref="'refName' + index" @click="clickGetRef(index)"> <p>{{ item.title }}</p> </div> </div></template><script>export default { data() { return { dataList: [ { "id": 1, "title": "这是来测试如何获取动态ref的" }, { "id": 2, "title": "第2条数据" }, { "id": 3, "title": "第3条数据" }, { "id": 4, "title": "第4条数据" }, ] } }, methods: { clickGetRef(index) { let ref = eval('this.$refs.refName' + index)[0] console.log(ref); } },}</script><style></style>二、双循环动态设置ref

1.设置:【:ref=“‘XXX’ + (index+i)”】或者【:ref=“‘XXX’ + id”】 index+i -->两个for循环的索引; id -->item的唯一标识;

2.获取:

let ref = eval('this.$refs.XXX' + (index + i))[0]或者let ref = eval('this.$refs.XXX' + (item.id))[0]

3.示例: 代码如下所示

<template> <div> <div class="ref_double_test"> <div v-for="(item, index) in dataLists" :key="index"> <div class="content" v-for="(sonItem, i) in item.sonList" :key="index + i" @click="clickGetDoubleRef(index, i, sonItem)"> <!-- 方式一:用索引的方式,用一个索引可能会重复,为防止重复,则用两个索引【index + i】 --> <div :ref="'refName1' + (index + i)">{{ item.title }}</div> ---- <!-- 方式二:用id的方式 --> <div :ref="'refName2' + sonItem.sonId">{{ sonItem.sonContent }}</div> </div> </div> </div> </div></template><script>export default { data() { return { dataLists: [ { "id": 1, "title": "第1条数据", "sonList": [ { "sonId": 1, "sonContent": "子集第1条数据" }, { "sonId": 2, "sonContent": "子集第2条数据" }, ] }, { "id": 2, "title": "第2条数据", "sonList": [ { "sonId": 11, "sonContent": "子集第11条数据" }, { "sonId": 22, "sonContent": "子集第22条数据" }, ] }, { "id": 3, "title": "第3条数据", "sonList": [ { "sonId": 111, "sonContent": "子集第111条数据" }, { "sonId": 222, "sonContent": "子集第222条数据" }, ] } ] } }, methods: { clickGetDoubleRef(index, i, sonItem) { // 方式一 let ref1 = eval('this.$refs.refName1' + (index + i))[0] console.log('ref1', ref1); // 方式二 let ref2 = eval('this.$refs.refName2' + sonItem.sonId)[0] console.log('ref2', ref2); } },}</script><style>.ref_test { width: 500px; height: 100px; border: 1px solid gray;}.content { width: 500px; height: 30px; display: flex; background: rebeccapurple; margin-bottom: 10px;}</style>
本文链接地址:https://www.jiuchutong.com/zhishi/287281.html 转载请保留说明!

上一篇:hottray.exe是什么进程 有什么作用 hottray进程查询

下一篇:如何在uniapp中优雅地使用WebView(uniapp如何使用)

  • 诺基亚像素最高的手机(诺基亚x700)(诺基亚像素多少)

    诺基亚像素最高的手机(诺基亚x700)(诺基亚像素多少)

  • qq删好友情侣空间会解除吗(qq删好友情侣空间还能回来啦)

    qq删好友情侣空间会解除吗(qq删好友情侣空间还能回来啦)

  •  苹果11网速慢的解决办法(苹果11网速超慢)

    苹果11网速慢的解决办法(苹果11网速超慢)

  • 拼多多技术服务费怎么收取的(拼多多技术服务费是什么,可以取消吗)

    拼多多技术服务费怎么收取的(拼多多技术服务费是什么,可以取消吗)

  • 在windows7中应用程序窗口什么的颜色改变(在windows7中应用程序最好安装在什么中)

    在windows7中应用程序窗口什么的颜色改变(在windows7中应用程序最好安装在什么中)

  • 新iphone要不要用旧id

    新iphone要不要用旧id

  • 微信为什么发不了长视频(微信为什么发不了语音)

    微信为什么发不了长视频(微信为什么发不了语音)

  • 华为p40圆圈悬浮窗怎么关(华为p40取消悬浮圆圈)

    华为p40圆圈悬浮窗怎么关(华为p40取消悬浮圆圈)

  • b站视频能下载吗(b站视频能下载到桌面吗)

    b站视频能下载吗(b站视频能下载到桌面吗)

  • 苹果11玻璃机身容易碎吗(苹果玻璃机身和磨砂机身哪个好看)

    苹果11玻璃机身容易碎吗(苹果玻璃机身和磨砂机身哪个好看)

  • 芒果在电视端叫什么(芒果电视版叫啥)

    芒果在电视端叫什么(芒果电视版叫啥)

  • 快手评论怎么看不见(快手评论怎么看自己的评论)

    快手评论怎么看不见(快手评论怎么看自己的评论)

  • 计算机五大性能指标(计算机五大性能指标单位)

    计算机五大性能指标(计算机五大性能指标单位)

  • apple watch一代怎么开机(apple watch一代怎么下载微信)

    apple watch一代怎么开机(apple watch一代怎么下载微信)

  • 200兆宽带用什么光猫(200兆宽带用什么交换机合适)

    200兆宽带用什么光猫(200兆宽带用什么交换机合适)

  • e盘是什么(onedrive盘是什么)

    e盘是什么(onedrive盘是什么)

  • 双十一退货红包能退吗(双十一退货红包怎么办)

    双十一退货红包能退吗(双十一退货红包怎么办)

  • OPPO k5有DC调光吗(oppo k5闪光灯怎么开)

    OPPO k5有DC调光吗(oppo k5闪光灯怎么开)

  • 一命归天是什么意思?(一命归天是哪个动物)

    一命归天是什么意思?(一命归天是哪个动物)

  • 存储器可分为哪三类(存储器可分为哪两种类型)

    存储器可分为哪三类(存储器可分为哪两种类型)

  • 探探换手机了怎么登陆(探探换手机怎么找回以前的号)

    探探换手机了怎么登陆(探探换手机怎么找回以前的号)

  • 聚划算开团什么意思(聚划算开团有时间限制吗)

    聚划算开团什么意思(聚划算开团有时间限制吗)

  • 怎么给图片设置超链接(怎么给图片设置网址)

    怎么给图片设置超链接(怎么给图片设置网址)

  • word转excel身份证号(word转excel身份证不变)

    word转excel身份证号(word转excel身份证不变)

  • 为什么wifi有信号却连接不上?(为什么wifi有信号没网络)

    为什么wifi有信号却连接不上?(为什么wifi有信号没网络)

  • 增值税专用发票的税率是多少啊
  • 餐厅打包盒算不算商品
  • 企业职工保险如何转灵活就业
  • 小企业会计准则以前年度损益调整
  • 企业所得税纳税人包括哪些类型
  • 汇算清缴中研发费用中其他费用可抵扣的比例是多少
  • 贷款应计利息会计分录
  • 企业对于无法收回的应收账款
  • 专项土地补偿款怎么入账?
  • 固定资产报废账务怎么处理
  • 其他应付款能转收入么
  • 小规模纳税人税收优惠政策变化
  • 装修公司在装修完后增加费用
  • 什么叫社保人员
  • 流转税率是什么意思
  • 企业所得税季度预缴纳税申报表
  • 小微企业免征增值税条件
  • 公司低价卖房土地增值税计税方法是什么
  • 股东借款可以转为认缴出资
  • 产品检测费用计入什么科目
  • 讲师费发票开票科目
  • 企业购房房产税土地税补缴
  • 公司的固定资产如何转变为股东资产
  • 预缴企业所得税是含税还是不含税
  • 本年利润余额负数表示什么意思
  • windows10软件图标不正常显示
  • win7安装sqlserver2008
  • 预付账款可以为负吗
  • 没有以前年度损益调整怎么办
  • php清空数据表
  • 媒体文件不能播放
  • 公司已经改名原来的公章还有效吗
  • 农产品进项税额转出会计分录
  • PHP:imagepsfreefont()的用法_GD库图像处理函数
  • 低值易耗品的三级科目有哪些
  • 工程物资发生报废损毁
  • 出口免退增值税计算公式
  • 补缴免抵退
  • 河马是站在睡觉吗
  • 生产企业出口退税申报流程操作
  • 浅谈php的排列组合
  • qt+opencv教程
  • 层层剖析的近义词
  • javascript教程
  • 自动驾驶科普
  • php递归函数桃子一天吃一半
  • 小规模建筑公司经营范围大全
  • 固定资产的销售怎么做账
  • python删除nan
  • 与取得收入无关的费用支出可以扣除吗
  • php获取参数值的三种方式
  • python 概率分布函数
  • 哪些收据可入账科目
  • 往来账户余额
  • 深圳市企业稳岗补贴标准
  • 为什么说运输是实现物流合理化的关键
  • 流动资产属于经营资产还是得经营资产
  • 行政单位汽车加油无明细怎么办
  • 发现以前年度假期不满
  • 长期挂账的其他应付款税务风险
  • 营业外支出可以抵扣进项税吗
  • 红字冲销凭证怎么登明细账
  • 残保金在网上怎么申报
  • 总账和明细账的区别与联系
  • sql外连接
  • 防止黑客入侵的有效做法
  • macbookpro怎么提升性能
  • centos7编译c语言
  • ubuntu20.04配置
  • ie运行flash
  • 系统映像不存在怎么重装系统
  • unity 3d数学
  • Cocos2dx 3.0 lambda表达式的使用
  • jQuery position() 函数详解以及jQuery中position函数的应用
  • js获取form表单数据并显示
  • typescript的缺点
  • 彻底解决老鼠进发动机舱
  • 长春国税局科员工资是多少
  • 深圳税务 qzzn
  • 船员工资是否需交税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设