位置: 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如何使用)

  • 小米平板5怎么查真伪(小米平板5怎么设置儿童限制功能)

    小米平板5怎么查真伪(小米平板5怎么设置儿童限制功能)

  • 手机密码忘了怎么开锁(手机密码忘了怎么恢复出厂设置)

    手机密码忘了怎么开锁(手机密码忘了怎么恢复出厂设置)

  • 手机浏览器看视频慢(手机浏览器看视频怎么小窗口播放)

    手机浏览器看视频慢(手机浏览器看视频怎么小窗口播放)

  • 为什么筛选显示不出来(为什么筛选显示空白)

    为什么筛选显示不出来(为什么筛选显示空白)

  • 一个号能扫几个敬业福(一个号能扫几个二维码)

    一个号能扫几个敬业福(一个号能扫几个二维码)

  • 华为nova7怎么设置导航键(华为nova7怎么设置锁屏壁纸)

    华为nova7怎么设置导航键(华为nova7怎么设置锁屏壁纸)

  • 登录超时是什么意思(登录显示超时什么原因)

    登录超时是什么意思(登录显示超时什么原因)

  • 反撤销的快捷键是什么(撤销反过来的快捷键)

    反撤销的快捷键是什么(撤销反过来的快捷键)

  • soul注销后会怎样(soul注销后还有瞬间吗)

    soul注销后会怎样(soul注销后还有瞬间吗)

  • 照片保密柜在哪里(照片保密柜哪个最多人用)

    照片保密柜在哪里(照片保密柜哪个最多人用)

  • 手机hms是什么意思(手机上的hms core是什么意思可以关闭吗)

    手机hms是什么意思(手机上的hms core是什么意思可以关闭吗)

  • 苹果手机怎么强制关机(苹果手机怎么强制关机重启)

    苹果手机怎么强制关机(苹果手机怎么强制关机重启)

  • 抖音作品被限制分享怎么办(抖音作品被限制范围)

    抖音作品被限制分享怎么办(抖音作品被限制范围)

  • 找不到文件netcfg.hlp是什么意思(找不到文件netpowerzip)

    找不到文件netcfg.hlp是什么意思(找不到文件netpowerzip)

  • ipad型号md513zpa是几寸(ipad型号是md531zp/a)

    ipad型号md513zpa是几寸(ipad型号是md531zp/a)

  • 快手顶置作品怎么搞(快手作品咋置顶啊)

    快手顶置作品怎么搞(快手作品咋置顶啊)

  • ios12系统怎么找照片流(iphone12怎么看系统版本)

    ios12系统怎么找照片流(iphone12怎么看系统版本)

  • 闲置转卖服务怎么开通(闲置转卖条例是什么)

    闲置转卖服务怎么开通(闲置转卖条例是什么)

  • 黑鲨语音助手怎么打开(黑鲨 语音助手)

    黑鲨语音助手怎么打开(黑鲨 语音助手)

  • 怎么在手机淘宝开网店(怎么在手机淘宝上开店)

    怎么在手机淘宝开网店(怎么在手机淘宝上开店)

  • iphone7p广角镜头怎么用(苹果7广角镜头)

    iphone7p广角镜头怎么用(苹果7广角镜头)

  • 无线装置已关闭是什么意思(无线装置已关闭,需关闭飞行模式才能拨打电话)

    无线装置已关闭是什么意思(无线装置已关闭,需关闭飞行模式才能拨打电话)

  • 手机上wps文档怎么打包(手机上wps文档怎么传到电脑wps上)

    手机上wps文档怎么打包(手机上wps文档怎么传到电脑wps上)

  • 阿里巴巴如何盈利(阿里巴巴1688的盈利模式)

    阿里巴巴如何盈利(阿里巴巴1688的盈利模式)

  • 华为mate20怎么设置锁屏时间(华为mate20怎么设置闹钟铃声)

    华为mate20怎么设置锁屏时间(华为mate20怎么设置闹钟铃声)

  • Linux系统中iwconfig命令使用详解(linux系统中用户账户有哪些分类)

    Linux系统中iwconfig命令使用详解(linux系统中用户账户有哪些分类)

  • popupkiller.exe是什么进程 popupkiller进程查询(pop是什么文件)

    popupkiller.exe是什么进程 popupkiller进程查询(pop是什么文件)

  • 【vue】 vue-router安装和配置方法(vue $route)

    【vue】 vue-router安装和配置方法(vue $route)

  • 小规模多计提增值税税率
  • 车船税是否每年都交
  • 增量留抵税额怎么做分录
  • 国家研发补贴政策
  • 6月份的申报期是几号
  • 汽车减税
  • 产品成本核算时做好哪些基础工作
  • 劳务派遣营改增政策
  • 委托其他公司开票收款
  • 自己生产的产品用于职工福利
  • 贴现利息应该计入哪个科目
  • 公益捐赠税前扣除凭证
  • 油品沥青消费税征收范围
  • 进项税额转出是好事还是坏事
  • 公司发生的业务可以转让给子公司嘛?
  • 企业所得税减免税额计算公式
  • 购买债券发生的交易费用计入哪个科目
  • 电商确认收货
  • 租金一次性付清的账务处理
  • 小规模农产品可以抵扣吗
  • ipados15 支持机型
  • 激活windows转到设置以激活windows怎么消除
  • 是否启用税种综合申报
  • 员工意外伤害保险怎么买
  • cpuz.exe
  • 缴纳印花税和残值的比例
  • 隐藏登录界面的软件
  • explore.exe
  • phpstorm 断点
  • 企业将自有房产怎么处理
  • coded language
  • 在草地上吃零食叫什么
  • 代开开增值税专票和自己开有什么区别
  • 总账是按年还是按月结账
  • Squarespace 和 WordPress 的区别
  • 自建自用 房产税
  • mysql崩溃日志
  • 税务自查报告范文自查报告怎么写
  • 企业年报经营状态
  • 缴纳城镇土地税
  • 开了红字发票申请还要做进项税转出吗
  • 增值税发票2年了还能开吗
  • 红字发票开错可以重开吗
  • 如何扣除企业接单费用
  • 帝国cms真的很好用
  • sqlserver sid
  • 小微企业所得税税率
  • 低值易耗品包括哪些
  • 公允模式投资性房地产转固定资产
  • 为支持防疫工作捐款
  • 上年未结转的成本今年可以结转吗
  • 已抵扣未申报的税额如何转出
  • 生产成本如何做核算
  • 加权平均净资产收益率公式
  • 应收票据的分录怎么做
  • 以原材料投入资本
  • 补交上年度的企业所得税税款计入什么科目
  • 顺风车没有发票是否合法
  • 工程施工人工费,材料费,机械费占多少比例
  • 贷款公司如何确定利率
  • 职工薪酬怎么核算
  • 息税前利润变动百分比计算公式
  • 用SELECT... INTO OUTFILE语句导出MySQL数据的教程
  • ubuntu开启图形化界面
  • linux临时目录在哪
  • 在linux系统中
  • linuxu
  • 20150405农历
  • 使用驱动器u盘之前需要格式化
  • xp启动项 命令
  • js中的?
  • 安卓判断横竖屏
  • android布局背景颜色的代码
  • jquery多级联动下拉菜单
  • 江苏省国家税务局官网
  • 企业填写莞e申报的通知
  • 广东省税务总局官网
  • 北京税务局公众平台官网
  • 云南省税务局召开的会议
  • 合肥地税局上班时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设