Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明

目录
  • Vue 2
  • Vue 3
  • 总结

Vue 2

在 vue 2 中，如果给 v-for 绑定一个 ref ，通过这个 ref 可以获取到全部 v-for 的节点。

HTML

	<div id='app'>
	    <div>
	        <p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p>
	    </div>
	</div>

JS

	data() {
        return {
            renderData: [
                { name: 'a' },
                { name: 'b' },
                { name: 'c' },
                { name: 'd' },
                { name: 'f' }
              ]
        }
    },
    mounted() {
        console.log(this.$refs.nodes)
    }

从而可以获得所有 v-for 的节点数组：

所以你可以在自定义触发事件中将索引传入，就可以在 this.$refs.nodes[index] 中获取触发事件的那个 dom 。

Vue 3

在 vue 3 中，对 v-for 的一体化（数组化）处理已经取消，变为函数处理 ref 。

如果你像 vue 2 中绑定：

	<div>
        <p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p>
    </div>

此时通过 this.$refs.nodes 只能获取遍历的最后一个节点 dom 。

如果要实现 vue 2 相同的数组，你可以对 ref 进行自定义处理：

HTML

	<div>
        <p v-for="item in renderData" :key="item.name" ref="handleNodes">{{item.name}}</p>
    </div>

JS

	data() {
		return {
			nodes: []
		}
	},
	methods: {
		handleNodes(el) {
			this.nodes.push(el)
		}
	}

也就是说 ref 的处理方式变为了函数，这个函数默认传入该节点。

当然，如果你不在 v-for 上使用，只是单纯的加入单个 ref ，使用方法和 vue 2 没有任何区别。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 一文带你详细了解Vue中的v-for

    目录 v-for v-set 重绘和回流 虚拟DOM computed计算属性 总结 v-for 作用: 列表渲染,所在标签结构,按照数据数量,循环生成.指令写在谁身上,就循环创建谁 1.语法: v-for = "(值变量,索引变量) in 目标结构" :key = 索引变量 v-for = "值变量 in 目标结构 :key = 索引变量" 目标结构:可以是数组,对象,字符串 2.数组方法如果修改了原数据就会更新 页面,如果没有修改,则不会,但可以重新赋值给变量让

  • 一文详解Vue3中使用ref获取元素节点

    目录 静态绑定 onMounted nextTick watchEffect watch v-for中使用 动态绑定 ref设置函数 通过getCurrentInstance方法 获取vue实例 前言: 本文介绍在vue3的setup中使用composition API获取元素节点的几种方法: 静态绑定 仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声明一个同名的ref属性(ref="domRef&qu

  • vue2和vue3的v-if与v-for优先级对比学习

    Vue.js 中使用最多的两个指令就是 v-if 和 v-for ,因此我们可能会想要同时使用它们.虽然官方不建议这样做,但有时确实是必须的,我们来了解下他们的工作方式: 在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时, v-for 会优先作用. 在 vue 3.x 中, v-if 总是优先于 v-for 生效. 对比学习 接下来我们通过一个简单的示例来感知下,假设我们想要实现一个极简的 todoList 效果: 我们有一个 todoList: const todoL

  • Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明

    目录 Vue 2 Vue 3 总结 Vue 2 在 vue 2 中,如果给 v-for 绑定一个 ref ,通过这个 ref 可以获取到全部 v-for 的节点. HTML <div id='app'> <div> <p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p> </div> <

  • vue3中通过ref获取元素节点的实现

    vue3中通过ref获取元素节点的实现

    目录 通过ref获取元素节点 获取ref元素的几种方式小结 1. 原生js获取dom元素 2. ref获取单个dom元素 3. ref获取v-for循环中的dom元素 4. 在swiper中获取swiper的dom元素 通过ref获取元素节点 ref 在vue2中可以说简化js原生的document.getElementById("#id")操作 .当然在vue3中也一样 首先,给你想获取到的元素一个ref 属性 然后,再将这个ref对象创建出来,就可以访问到他的值 但是.这样在set

  • 一篇文章搞懂Vue3中如何使用ref获取元素节点

    目录 前言 1.回顾 Vue2 中的 ref 2.Vue3 中 ref 访问元素 3.v-for 中使用 ref 4.ref 绑定函数 5.组件上使用 ref 总结 前言 虽然在 Vue 中不提倡我们直接操作 DOM,毕竟 Vue 的理念是以数据驱动视图.但是在实际情况中,我们有很多需求都是需要直接操作 DOM 节点的,这个时候 Vue 提供了一种方式让我们可以获取 DOM 节点:ref 属性.ref 属性是 Vue2 和 Vue3 中都有的,但是使用方式却不大一样,这也导致了很多从 Vue2

  • Vue3通过ref操作Dom元素及hooks的使用方法

    Vue3 ref获取DOM元素 <div ref="divBox">Hello</div> import {ref,onMounted} from 'vue' setup() { const divBox = ref(null); onMounted(()=>{ console.log(divBox.value); }) return{divBox} } 父组件监听子组件中的元素 在父组件中的子组件里会打印一个proxy(实例),通过实例去获取里面的属性或

  • vue3中ref绑定dom或者组件失败的原因及分析

    目录 vue3 ref绑定dom或者组件失败原因分析 场景描述 ref绑定失败情况举例 解决方案 vue3组合式API的v-for及ref绑定DOM 总结 vue3 ref绑定dom或者组件失败原因分析 场景描述 在vue3中经常用到使用ref绑定组件或者dom元素的情况,很多时候,明明使用ref绑定了相关组件,但是经常ref绑定失败的情况. ref绑定失败情况举例 ref绑定失败的绝大多数情况是,在ref和组件绑定的时候,该组件还未渲染,所以绑定失败. 或者组件刚开始未渲染,ref未绑定,当组

  • 用Vue Demi同时支持Vue2和Vue3的方法

    目录 Vue Demi是什么 基本原理 v2版本 v2.7版本 v3版本 Vue Demi是什么 如果你想开发一个同时支持Vue2和Vue3的库可能想到以下两种方式: 1.创建两个分支,分别支持Vue2和Vue3 2.只使用Vue2和Vue3都支持的API 这两种方式都有缺点,第一种很麻烦,第二种无法使用Vue3新增的组合式 API,其实现在Vue2.7+版本已经内置支持组合式API,Vue2.6及之前的版本也可以使用@vue/composition-api插件来支持,所以完全可以只写一套代码同

  • 由浅入深讲解vue2和vue3的区别

    目录 前言 vue2 vs vue3 对比 双向绑定更新 实例化 生命周期 获取props 数据和方法的定义 给父组件传值emit watchEffect 组件通信 注意 路由 总结 前言 vue2和vu3之前的区别,一直以来是面试必考题目,如何回答,回答的层次决定了面试者的对于vue2,3的理解,以及对于vue3目前稳定版本发展的方向的了解,即考察使用程度,又考察了学习能力,可以说是回答即可以很简单,也可以很不简单,这里需要注意的是面试官的面试程度,需要我们层层递进,由浅入深来回答,这样可以体

  • Vue2 与 Vue3 的数据绑定原理及实现

    目录 介绍 Object.defineProperty Proxy 介绍 数据绑定是一种把用户界面元素(控件)的属性绑定到特定对象上面并使其同步的机制,使开发人员免于编写同步视图模型和视图的逻辑. 观察者模式又称为发布-订阅模式,定义对象间的一种一对多的依赖关系,当它本身的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新.比如用户界面可以作为一个观察者,业务数据是被观察者,用户界面观察业务数据的变化,发现数据变化后,就同步显示在界面上.这样可以确保界面和数据之间划清界限,假定应用程序的需

  • 稍微学一下Vue的数据响应式（Vue2及Vue3区别）

    稍微学一下Vue的数据响应式（Vue2及Vue3区别）

    什么是数据响应式 从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom. 换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改. 因此实现数据响应式有两个重点问题: 如何知道数据发生了变化? 如何知道数据变化后哪里需要修改? 对于第一个问题,如何知道数据发生了变化,Vue3 之前使用了 ES5 的一个 API Object.defineProperty Vue

随机推荐