首页 > 其他分享 >如何在vue3获取 DOM 元素

如何在vue3获取 DOM 元素

时间:2023-04-04 18:34:51浏览次数:51  
标签:哈哈哈 dom setup DOM 获取 vue3 test null ref

  1. 获取dom的ref元素名称,要对应暴露的名称,不然会出现无效的dom报错,也就是拿到的是null
  2. 在setup中,使用ref(null)获取dom
  3. 不能直接在setup里面拿到dom的值,因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到,比如onMounted
  4. 注意:ref 不要加冒号,直接写 dom 元素名称
const test = ref(null);
    console.log(test.value); // null
    onMounted(() => {
        console.log(test.value); // <div id="test" ref="test">哈哈哈哈哈哈</div>
    });

<div id="test" ref="test">哈哈哈哈哈哈</div>

参考文档

官方文档

标签:哈哈哈,dom,setup,DOM,获取,vue3,test,null,ref
From: https://www.cnblogs.com/beileixinqing/p/17287349.html

相关文章

  • Js/Jquery获取自定义属性的方法
    html:<spanid="item"data-test='test'></span>方法一、原生JS的getAttribute获取自定义属性设置属性.setAttribute("属性","值")获取属性.getAttribute("属性")varspan=document.getElementById('item').ge......
  • js和jquery获取屏幕宽高以及加margin和padding等边距的宽高
    Javascript:网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth(包括边线的宽)网页可见区域高:document.body.offsetHeight(包括边线的高)网页正文全文宽:document.body.scrollWidth网页正文......
  • Vue3——使用deep进行样式穿透的时候发出v-deep警告
    前言其实只是一个警告,如果你不在意也是可以的,不过有点强迫症就按着提示说的改了,然后又去官网看了下对应的文档;!>::v-deepusageasacombinatorhasbeendeprecated.Use:deep()instead.这里没啥好说的,因为Vue3的文档中有对应的解释组件作用域CSS了,而且就算不看文档根据提......
  • node子进程(Child Process)获取硬盘分区
    node  child_process文档 child_process.exec(command[,options][,callback])command <string> Thecommandtorun,withspace-separatedarguments.options<Object>cwd <string> Currentworkingdirectoryofthechildprocess. Default: null.env......
  • 项目实践后的图片压缩完整使用过程【vue3+js】
    van-uploader+图片压缩+图片base64转成file compressImage.jsconstACCEPT=['image/jpg','image/png','image/jpeg']constMAXSIZE=1024*1024*2;constMAXTIP="4"//压缩算法函数/*1.首先拿到了base64的图片字符串2.创建一个image对象,获......
  • Django获取本地ip
    importsocketdefget_local_ip():"""获取本机IP地址:通用"""try:s=socket.socket(socket.AF_INET,socket.SOCK_DGRAM)s.connect(('8.8.8.8',80))ip=s.getsockname()[0]fina......
  • API获取商品评论?
    前言   小伙伴们好,前两天因为个人原因耽误了内容的更新,在这里和所有的小伙伴道个歉,今天CC和大家唠唠商品评论的这个话题,大家在网上购物的决策会因为《商品评论的好坏》吗,相信绝大的一部分的小伙伴都不用思考,脑袋里就直接蹦出来一句,肯定啊,肯定要根据其他买家的用户体验去决定......
  • 商品获价API调用说明:获取商品历史价格信息 代码分享
    接口名称:item_history_price公共参数名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中)(获取测试key和secret接入)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop等]cacheStrin......
  • C#获取网络状态两种方式
    第一种///<summary>///获取网络状态///</summary>///<paramname="IP"></param>///<returns></returns>publicstaticboolCheckedIPSpeed(stringIP){......
  • 随机生成工具 RandomValueUtil
    packageentity;/*****@Author:www.itheima.com*@Description:itheima*****/publicclassRandomValueUtil{publicstaticStringbase="abcdefghijklmnopqrstuvwxyz0123456789";privatestaticStringfirstName="赵钱孙李周吴郑王冯陈褚卫蒋沈......