1. 通过 ref
    1. 在 html 标签上指定 ref 属性
    2. 在 setup 中定义并返回.注意:标签上的 ref 属性名需要跟 setup 中的对应
        <h1 ref="msg">Welcome to vue3 app</h1>
setup() {
const msg = ref(null);
onMounted(() => {
console.log(msg.value.innerHTML);
});
return {
msg,
};
},
2. 通过原生 JavaScript 获取
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">
vue-cli documentation
</a>;
onMounted(() => {
console.log(document.querySelector('a[rel="noopener"]').href);
});

vue3 如何获取 dom的更多相关文章

  1. vue3+ts获取dom元素高度

    vue3+ts获取dom元素高度 <template> <div class="digestDetail-indedx"> <div class=&q ...

  2. 通过class和id获取DOM元素的区别

    1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...

  3. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  4. React 点击删除列表中对应项(React 获取DOM中自定义属性)

    点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...

  5. 用document.onreadystatechange和document.readyState确保文档加载完毕才获取DOM

    document.onreadystatechange = function(){ //document.readyState有“interactive”和“complate”两个值 if(docum ...

  6. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  7. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  8. Vue自定义指令获取DOM元素

    我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...

  9. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  10. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

随机推荐

  1. 6.Class 与 Style 绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求. 因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可. 不过,字符串拼接麻烦且易错.因此,在 ...

  2. Dawwin首位人工智能编程师,未来又会怎么样?

    Darwinai是一家快速发展的视觉质量检测公司,为制造商提供端到端解决方案,以提高产品质量并提高生产效率.该公司的专利可解释人工智能(XAI)平台已被众多财富500强公司采用,可以轻松集成值得信赖的 ...

  3. 使用ML.NET训练一个属于自己的图像分类模型,对图像进行分类就这么简单!

    前言 今天大姚给大家分享一个.NET开源.免费.跨平台(支持Windows.Linux.macOS多个操作系统)的机器学习框架:ML.NET.并且本文将会带你快速使用ML.NET训练一个属于自己的图像 ...

  4. docker卸载分享

    一.准备工作: 1.杀死docker有关的容器: docker kill $(docker ps -a -q) 2.删除所有docker容器: docker rm $(docker ps -a -q) ...

  5. Linux如何安装PHPMyAdmin

    1,我们要以root帐号登入 . 2,PHP支持模块安装.在CentOS操作系统安装完毕后,其实PHP支持模块并没有安装上去,如果想使用PhpMyAdmin,首先需要安装PHP支持模块,我们需要两个P ...

  6. [oeasy]python0013_ASCII码表_英文字符编码_键盘字符

    ​ ASCII 码表 回忆上次内容 ​ord(c)​​和​​chr(i)​ 这是俩函数 这俩函数是一对,相反相成的⚖️ ​​ord​​ 通过 ​​字符​​ 找到对应的 ​​数字​​ ​​chr​​ 通 ...

  7. 搭建自动化 Web 页面性能检测系统 —— 部署篇

    我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:琉易 liuxianyu.cn 这一篇是系列文章: 搭建自 ...

  8. P1081 [NOIP2012 提高组] 开车旅行

    思路: 首先令 \(nxt1_i\) 表示右侧最近的城市距离(\(id1_i\) 为编号),令 \(nxt2_i\) 表示右侧第二近的城市编号(\(id2_i\) 为编号):可以使用 set 找出离这 ...

  9. python面向对象游戏练习:好人坏人手枪手榴弹

    python面向对象游戏练习:好人坏人手枪手榴弹 主要是多态的练习,对象作为参数传给方法使用 1 #!/usr/bin/env python 2 # -*- coding:utf-8 -*- 3 4 ...

  10. AI开源是否应该完全开源?AI的完全开源是否可以实现?

    看了一个视频: 袁进辉:零代码改动,加速AIGC 里面提到了一个完全开源的概念,感觉有些意思,虽然觉得可实现性不高,嘿嘿嘿!!! AI的完全开源: 训练数据开源.数据清洗过程开源.模型权重开源.项目代 ...