vue如何在for循环中设置ref并获取$refs
作者:dn... 发布时间:2023-07-02 17:00:04
标签:vue,$refs,for循环
一、单循环动态设置ref
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>
二、双循环动态设置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://blog.csdn.net/qq_45565693/article/details/127294052
0
投稿
猜你喜欢
- JavaScript中的定时器大家基本在平时的开发中都遇见过吧,但是又有多少人去深入的理解其中的原理呢?下面我们就来分析一下定时器的实现原理
- 创建小程序全局函数1:在微信开发工具中增加一个JS文档, 放入全局全局函数代码说明1:全局函数只能放var定义的变量下,本例的var 变量为
- 一:购物车管理功能1.添加商品(不重复添加)、2.删除商品(购物车中有的才能删除)、3.查看购物车4.退出系统产品列表products =
- 主题众所周知,django.forms极其强大,不少的框架也借鉴了这个模式,如Scrapy。在表单验证时,django.forms是一绝,也
- Golang 复制文件夹,包括文件夹中的文件/** * 拷贝文件夹,同时拷贝文件夹中的文件 * @param srcPath 需要拷贝的文件
- 使用python实现简单倒计时exe,供大家参考,具体内容如下使用tkinter制作界面实现倒计时功能。使用time.sleep(1)实现
- 阅读上一篇:浏览器中的内存泄露 4.内存泄露的解决方案显式类型转换 首先说说最容易处理的情况 对于类型转换造成的错误,我们可以通过显式类型转
- 一直想着给框架添加邮件发送功能、所以整理下python下邮件发送功能首先python是支持邮件的发送、内置smtp库、支持发送纯文本、HTM
- 最近做项目的时候遇到过oracle数据库导入导出,在这里我做下记录,防止自己忘记了,有什么不对或者不足的地方,欢迎广大博友拍砖,哈哈~导出命
- 如果你在写文章或者 Demo,为了简单,你当然可以用事件监听函数,以及那些事件对象提供的方法等。但在实际中,有一些方法和属性是有兼容性问题的
- 目录图像边框的实现图像边框设计的主要函数图像混合的实现图像混合实现的主要函数主要思路图像边框的实现图像边框设计的主要函数cv.copyMak
- Python有一个不错的3D引擎——UrsinaUrsina官网:www.ursinaengine.
- request获取post请求中的json数据def hello(request): data = json.loads(request.b
- 方法1:用SET PASSWORD命令mysql> set password for 用户名@localhost = password
- 本文实例为大家分享了python策略模式代码,供大家参考,具体内容如下"""策略模式""&
- mysql5.6 解析JSON字符串支持复杂的嵌套格式废话不多说,先上代码。CREATE FUNCTION `json_parse`(`js
- function createobj() { if (window.ActiveXObject)&n
- 首先确保已安装jupyter notebook,而且添加到了环境变量再找到保存ipynb文件的文件夹,在路径处直接输入cmd,然后回车进入命
- 有的时候,我们为了保持网页的美观,需要将较长的文字在一定长度时截断。比如我们希望在列表中显示文章标题的前15个字,那么一个这样的标题:“rs
- 发现这个也是偶然,在测试的时候发现的,因此问题还发现一个bug。蛮有意思~ 假如输入http://www.aspxhome.com的话,在