vue 在v-for列表动态添加ref，并获取对应元素

vue中的ref对于操作dom非常方便，可以直接通过给div加ref，在方法里通过this.$refs.ref的name获取

<template><div class="nav" ref="nav">   // 给div加ref</div>
</template><script>export default {methods: {handleData() {this.$refs.nav   // 获取dom}},}
</script>

对于v-for渲染的动态元素，可以通过设置相同的ref，并通过索引获取

<template><div class="nav" ref="nav">   // 给div加ref<li v-for="(items,index) of item.datas" ref="navlist" @click="newsNavBtn(index)" :class="{active:actives==items.id}">{{items.name}}</li></div>
</template><script>export default {methods: {newsNavBtn(index) {console.log(this.$refs.navlist)}},}
</script>

控制台输入结果如下：

可以看到，此时的this.$refs.navlist是一个数组，而我们要获取的是每一个dom元素，因此，只用在数组加上索引即可
即

newsNavBtn(index) {console.log(this.$refs.navlist[index])
}

输出结果如下：

vue文档介绍ref的时候有一句话：
当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。

vue 在v-for列表动态添加ref，并获取对应元素相关推荐

Vue3--ref使用（解决ref无法获取dom元素的问题）
众所周知在vue2中,ref主要的作用还是便于快速的获取dom元素或组件,因为ref操作相比document.getElementbyId会减少dom操作的节点消耗. 具体关于vue2中ref和$re ...
vue element-ui自定义表头，动态添加表头，新增行、新增列、删除行、删除列
vue element-ui表格怎样自定义表头,动态添加表头,新增行.新增列.删除行.删除列需求描述 1.自定义表头,表头里插入输入框 2.默认初始化几行几列占位 3.新增行 4.新增列 5.右键点 ...
vue动画-实现购物车的动态添加动画
需求分析:进入产品列表,点击缩略图旁+号,有个该商品被动态添加到购物车的动画.让我们实现这个动画吧. 如下图: 通过动图可以发现移动的曲线是蜿蜒曲折的,这就用到了贝塞尔曲线. 他的弧度是这样的. 贝塞 ...
vue+ElementUI实现订单页动态添加产品效果
使用vue2.0(ElementUI基于vue2.0)+ElementUI(饿了么出品)实现的在订单页面动态添加产品的效果,并自动计算总价.代码直接保存为html文档,使用浏览器打开即可查看效果. 效 ...
python列表动态添加_在Python中动态创建列表
我有一堆与不同组关联的项,我最终想为每个组创建一个列表,其中包含所有关联项.在问题是我不知道有多少组,所以如何动态生成正确数量的列表,以及如何调用它们?在我在循环item_list和group_l ...
vue在行内标签中动态添加背景图片，还有其他样式
<div :style="{'background-image': `url(${require('./image/1.png')}) no-repeat center center` ...
java panel 显示文字,从动态添加的jPanel获取文本
我动态地添加subPanel到jPanel1(与jTextField和jButton).部分代码是从那里借来的. 我正在尝试从的组件获取文本jPanel1,但无法成功. 编辑: 这是一个包含子面板jT ...
vue --- ref属性获取dom元素和子组件的方法
说明: // 假设login的组件定义如下: Vue.component('login', {template:'<h1>登录</h1>',data(){return {msg ...
QTableWidget动态添加QComboBox并获取表格单元的Widget类型
//QTableWidget获取表格单元的Widget类型 auto test = (tableWidget->cellWidget(rowNum, 1)); qDebug() << ...

vue 在v-for列表动态添加ref，并获取对应元素

vue 在v-for列表动态添加ref，并获取对应元素

vue 在v-for列表动态添加ref，并获取对应元素相关推荐

最新文章

热门文章