vue?3.0?使用ref获取dom元素的示例_vue.js

来源:脚本之家  责任编辑:小易  

前言

附上vue3.0文档:Vue3中文文档 - vuejs

Vue 2.x获取DOM

<div ref="myRef"></div>
this.$refs.myRef

Vue 3.0获取单个DOM

<template>
  <div ref="myRef">获取单个DOM元素</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myRef = ref(null);

    onMounted(() => {
      console.dir(myRef.value);
    });
 
    return {
      myRef
    };
  }
};
</script>

Vue 3.0获取多个DOM(一般用于获取数组)

<template>
  <div>获取多个DOM元素</div>
  <ul>
    <li v-for="(item, index) in arr" :key="index" :ref="setRef">
      {{ item }}
    </li>
  </ul>
</template>

<script>
import { ref, nextTick } from 'vue';

export default {
  setup() {
    const arr = ref([1, 2, 3]);

    // 存储dom数组
    const myRef = ref([]);

    const setRef = (el) => {
      myRef.value.push(el);
    };

    nextTick(() => {
      console.dir(myRef.value);
    });

    return {
      arr,
      setRef
    };
  }
};
</script>

注:console.dir()可以显示一个对象所有的属性和方法

效果图:

在这里插入图片描述

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。

到此这篇关于vue 3.0 使用ref获取dom元素的文章就介绍到这了,更多相关vue ref获取dom元素内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:Vue 解决通过this.$refs来获取DOM或者组件报错问题vue中使用refs定位dom出现undefined的解决方法Vue 2.0学习笔记之使用$refs访问Vue中的DOMVue中的ref作用详解(实现DOM的联动操作)

  • 本文相关:
  • vue项目环境搭建详细总结
  • vue.js获得当前元素的文字信息方法
  • vue项目中使用bootstrap
  • vueawesomeswiper在vue中的使用以及遇到的一些问题
  • 详解几十行代码实现一个vue的状态管理
  • 解决前后端分离 vue+springboot 跨域 session+cookie失效问题
  • vue 无限滚动加载指令实现方法
  • vue头像处理方案小结
  • vue实现星级评价效果实例详解
  • vue出现弹出层时禁止底部页面跟随滑动
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库vue.jsvue 解决通过this.$refs来获取dom或者组件报错问题vue中使用refs定位dom出现undefined的解决方法vue 2.0学习笔记之使用$refs访问vue中的domvue中的ref作用详解(实现dom的联动操作)vue项目环境搭建详细总结vue.js获得当前元素的文字信息方法vue项目中使用bootstrapvueawesomeswiper在vue中的使用以及遇到的一些问题详解几十行代码实现一个vue的状态管理解决前后端分离 vue+springboot 跨域 session+cookie失效问题vue 无限滚动加载指令实现方法vue头像处理方案小结vue实现星级评价效果实例详解vue出现弹出层时禁止底部页面跟随滑动vue引用js文件的多种方式(推荐)vue跳转页面的几种方法(推荐)详解vue 路由跳转四种方式 (带参数)vue项目刷新当前页面的三种方法vue之父子组件间通信实例讲解(props、$ref、$emvue props用法详解(小结)vue.js中created方法作用element-ui中select组件绑定值改变,触发chavue实现文件上传功能简单理解vue中props属性vue.set()动态的新增与修改数据,触发视图更新的方法vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)vue中ant-design-vue组件的安装与使用vue自定义指令详解关于vite.config.ts文件的配置方式vue全家桶实践项目总结(推荐)vue实现div可拖动位置也可改变盒子大小的原理vue前端路由hash与history差异深入了解vue点击dashboard不同内容 跳转到同一表格的实例vue按需加载实例详解
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved