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. SpringBoot快速插入Mysql 1000万条数据

    导读 有时候为了验证系统瓶颈,需要往数据库表中插入大量数据,可以写sheel脚本插入,前几天为了插入100万条数据,走的sheel脚本(点我直达),插入速度简直无法直视,花了3小时,才插入了10万条, ...

  2. HOOK别人的dylib(HOOK cydia里面的插件)

    以下仅做我在hook 中的记录, 环境 VM PRO 15 MAC OS 15 Xcode 11.2 工具 monkeydev install_name_tool otool 思路:将要hook 的d ...

  3. CF620E

    题目 CF620E 思路 这个题是一个在树上操作的题,每次操作的对象都是以一个结点为根的子树,在1e5的操作下暴力做法必然会超时 观察到c的范围很小,可以考虑状态压缩 考虑将此问题转化为区间问题,利用 ...

  4. 容器技术Docker知识精讲【形成知识体系篇】

    作者的经验分享,包括很多实战过程和总结,为着手系统化学习Docker容器的朋友提供. 环境要求 Linux操作系统(Centos),建议在虚拟机VMware或VirtualBox下安装Centos D ...

  5. CGI,FastCGI和PHP-FPM之间的关系和区别

    什么是CGI?早期的web server只可以处理简单的静态web文件,但是随着技术的发展出现动态语言如PHP,Python.PHP语言交给PHP解析器进行处理,但是处理之后如何和web server ...

  6. Visual Studio中如何解决error C4996: 问题

    error C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s instead. To di ...

  7. find命令在根目录查找文件

    find命令在根目录查找文件 find命令口诀是: find   路   名   含 一,首先看看路径的表示方法 .  表示当前目录 .. 表示上一级目录 cd ..  表示返回上一级目录cd ../ ...

  8. 腾讯云免费申请SSL证书配置https

    证书申请 1.进入腾讯云官网,在上方直接搜索SSL,搜索到后点击立即选购: 2.点击进去后选择自定义配置,加密标准选择默认的国际标准,证书种类选择域名免费版(DV),勾选同意服务条款后选择免费快速申请 ...

  9. SemanticKernel/C#:使用Ollama中的对话模型与嵌入模型用于本地离线场景

    前言 上一篇文章介绍了使用SemanticKernel/C#的RAG简易实践,在上篇文章中我使用的是兼容OpenAI格式的在线API,但实际上会有很多本地离线的场景.今天跟大家介绍一下在Semanti ...

  10. 【Vue】10 Vue-Cli 项目创建

    简单的Demo案例并不需要Vue-Cli,因为一个页面之内可以总揽 但是真实的项目开发,考虑代码结构,目录结构,部署,热部署,单元测试... 代码量呈几何倍数增长,而且缺少轮子就写起来很痛苦 所以必须 ...