发布于2022-12-03 15:05 阅读(1053) 评论(0) 点赞(9) 收藏(5)
1.设置:【:ref=“‘XXX’ + index”】XXX -->自定义ref的名字
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>
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>
作者:麻辣小龙虾
链接:http://www.qianduanheidong.com/blog/article/459349/c0014d9787362d850b85/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!